diff --git a/docs/customization/contextual.html b/docs/customization/contextual.html index 164076a..269fdbc 100644 --- a/docs/customization/contextual.html +++ b/docs/customization/contextual.html @@ -264,7 +264,7 @@
<mark>
color variant using the specified values.px
preferred)<progress>
color variant using the specified values.<progress>
style variant<progress>
style variantpx
preferred)The utility module's visiblity helpers use a couple of custom classes, while certain legacy features are also available via certain variables and custom class definitions.
Variable | Type | Description | Sample value |
---|---|---|---|
$hidden-name | String | +Class name for hidden elements | 'hidden' | +
$visually-hidden-name | String | +Class name for visually hidden elements | 'visually-hidden' | +
$include-floats | Logical | +Enables floats (legacy feature)1 | false | +
$float-prefix | String | +Class prefix for float classes1 | 'float' | +
$include-clearfix | Logical | +Enables the clearfix (legacy feature)2 | false | +
$clearfix-name | String | +Class name for clearfix2 | 'clearfix' | +
$include-center-block | Logical | +Enables the center block (legacy feature)3 | false | +
$center-block-name | String | +Class name for center block3 | 'center-block' | +
$float-prefix
will only be used if $include-floats
is set to true
.$clearfix-name
will only be used if $include-clearfix
is set to true
.$center-block-name
will only be used if $include-center-block
is set to true
.The utility module's breadcrumbs use a custom class and a few varaibles to allow you to customize their appearance.
Variable | Type | Description | Sample value |
---|---|---|---|
$breadcrumbs-name | String | +Class name for the breadcrumbs component | 'breadcrumbs' | +
$breadcrumbs-back-color | Color | +Background color for the breadcrumbs component | #e0e0e0 | +
$breadcrumbs-margin | Margin | +Margin for the breadcrumbs component | 10px | +
$breadcrumbs-height | Height | +Height for the breadcrumbs component | 32px | +
$breadcrumbs-separator-width | Width | +Width of the breadcrumbs component's separator | 2px | +
$breadcrumbs-border-style | Border | +Border style for the breadcrumbs component | 1px solid #bdbdbd | +
$breadcrumbs-border-radius | Border radius | +Border radius for the breadcrumbs component | 4px | +
$breadcrumbs-box-shadow | Box shadow | +Box shadow for the breadcrumbs component | 0 1px 3px rgba(0,0,0, 0.1) | +
The utility module's close icon uses a custom class and a few variable to customize its appearance.
Variable | Type | Description | Sample value |
---|---|---|---|
$close-icon-name | String | +Class name for the close icon component | 'close' | +
$close-icon-size | Font size | +Size of the close icon component | 32px | +
$close-icon-back-color | Color | +Background color for the close icon component | #e0e0e0 | +
$close-icon-fore-color | Color | +Foreground color for the close icon component | #212121 | +
The utility module contains a few mixins for creating generic borders, border styles and shadows.
Mixin | Description |
---|---|
make-border-generic ($border-generic-name) | +Creates a new class that applies a generic border, based on the specified value. | +
make-border-radial-style ($border-radial-name, $border-radial-radius) | +Creates a new class that applies a generic radial border, based on the specified values. | +
make-box-shadow-generic ($box-shadow-name, $box-shadow-value) | +Creates a new class that applies a generic box shadow, based on the specified values. | +
Parameter | Type | Description | Sample value |
---|---|---|---|
$border-generic-name | String | +Class name for the generic border class | 'bordered' | +
@include make-border-generic ('bordered');+
Parameter | Type | Description | Sample value |
---|---|---|---|
$border-radial-name | String | +Class name for the generic radial border class | 'rounded' | +
$border-radial-radius | Border radius | +Border radius for the generic radial border class | 2px | +
@include make-border-radial-style ('rounded', 2px);+
Parameter | Type | Description | Sample value |
---|---|---|---|
$box-shadow-name | String | +Class name for the generic box shadow class | 'shadow-small' | +
$box-shadow-value | Box shadow | +Box shadow for the generic box shadow class | 0 1px 3px rgba(0,0,0, 0.1) | +
@include make-box-shadow-generic ('shadow-small', 0 1px 3px rgba(0,0,0, 0.1));+
The utility module contains a couple of mixins for creating responsive sizing and spacing classes.
Mixin | Description |
---|---|
make-margin-responsive ($margin-name, $margin-small-value, $margin-medium-value, $margin-large-value, $margin-medium-breakpoint, $margin-large-breakpoint, $margin-use-four-step-grid, $margin-small-breakpoint, $margin-extra-small-value) | +Creates a responsive margin class using the specified values. | +
make-padding-responsive ($padding-name, $padding-small-value, $padding-medium-value, $padding-large-value, $padding-medium-breakpoint, $padding-large-breakpoint, $padding-use-four-step-grid, $padding-small-breakpoint, $padding-extra-small-value) | +Creates a responsive padding class using the specified values. | +
Parameter | Type | Description | Sample value |
---|---|---|---|
$margin-name | String | +Class name for the responsive margin class | 'urgent' | +
$margin-small-value | Margin | +Margin of the responsive margin class on smaller screens | 4px | +
$margin-medium-value | Margin | +Margin of the responsive margin class on medium-sized screens | 6px | +
$margin-large-value | Margin | +Margin of the responsive margin class on larger screens | 8px | +
$margin-medium-breakpoint | Breakpoint | +(Optional) Breakpoint of the responsive margin class for medium-sized screens | 768px | +
$margin-large-breakpoint | Breakpoint | +(Optional) Breakpoint of the responsive margin class for larger screens | 1280px | +
$margin-use-four-step-grid | Logical | +(Optional) Enables the use of the four-step grid for the responsive margin class | false | +
$margin-small-breakpoint | Breakpoint | +(Optional) Breakpoint of the responsive margin class for smaller screens (four-step grid only) | 480px | +
$margin-extra-small-value | Margin | +(Optional) Margin of the responsive margin class on extra small screens (four-step grid only) | 2px | +
@include make-margin-responsive ('responsive-margin', 4px, 6px, 8px, 768px, 1280px, true, 480px, 2px);+
Parameter | Type | Description | Sample value |
---|---|---|---|
$padding-name | String | +Class name for the responsive padding class | 'urgent' | +
$padding-small-value | Padding | +Padding of the responsive padding class on smaller screens | 4px | +
$padding-medium-value | Padding | +Padding of the responsive padding class on medium-sized screens | 6px | +
$padding-large-value | Padding | +Padding of the responsive padding class on larger screens | 8px | +
$padding-medium-breakpoint | Breakpoint | +(Optional) Breakpoint of the responsive padding class for medium-sized screens | 768px | +
$padding-large-breakpoint | Breakpoint | +(Optional) Breakpoint of the responsive padding class for larger screens | 1280px | +
$padding-use-four-step-grid | Logical | +(Optional) Enables the use of the four-step grid for the responsive padding class | false | +
$padding-small-breakpoint | Breakpoint | +(Optional) Breakpoint of the responsive padding class for smaller screens (four-step grid only) | 480px | +
$padding-extra-small-value | Padding | +(Optional) Padding of the responsive padding class on extra small screens (four-step grid only) | 2px | +
@include make-padding-responsive ('responsive-padding', 4px, 6px, 8px, 768px, 1280px, true, 480px, 2px);+
The utility module contains a couple of mixins for creating responsive visibility helpers.
Mixin | Description |
---|---|
make-hidden-responsive ($hidden-prefix, $hidden-medium-breakpoint, $hidden-large-breakpoint,$hidden-small-suffix, $hidden-medium-suffix, $hidden-large-suffix, $hidden-use-four-step-grid, $hidden-small-breakpoint, $hidden-extra-small-suffix) | +Creates a responsive class for hiding elements using the specified values. | +
make-visually-hidden-responsive ($visually-hidden-prefix, $visually-hidden-medium-breakpoint, $visually-hidden-large-breakpoint,$visually-hidden-small-suffix, $visually-hidden-medium-suffix, $visually-hidden-large-suffix, $visually-hidden-use-four-step-grid, $visually-hidden-small-breakpoint, $visually-hidden-extra-small-suffix) | +Creates a responsive class for visually hiding elements using the specified values. | +
Parameter | Type | Description | Sample value |
---|---|---|---|
$hidden-prefix | String | +Class prefix for the responsive hiding class | 'hidden' | +
$hidden-medium-breakpoint | Breakpoint | +(Optional) Breakpoint of the responsive hiding class for medium-sized screens | 768px | +
$hidden-large-breakpoint | Breakpoint | +(Optional) Breakpoint of the responsive hiding class for larger screens | 1280px | +
$hidden-small-suffix | String | +Suffix of the responsive hiding class on smaller screens | 'sm | +
$hidden-medium-suffix | String | +Suffix of the responsive hiding class on medium-sized screens | 'md' | +
$hidden-large-suffix | String | +Suffix of the responsive hiding class on larger screens | 'lg' | +
$hidden-use-four-step-grid | Logical | +(Optional) Enables the use of the four-step grid for the responsive hiding class | false | +
$hidden-small-breakpoint | Breakpoint | +(Optional) Breakpoint of the responsive hiding class for smaller screens (four-step grid only) | 480px | +
$hidden-extra-small-suffix | String | +(Optional) Suffix of the responsive hiding class on extra small screens (four-step grid only) | 'xs' | +
@include make-hidden-responsive ('hidden', 768px, 1280px, 'sm', 'md', 'lg', true, 480px, 'xs');+
Parameter | Type | Description | Sample value |
---|---|---|---|
$visually-hidden-prefix | String | +Class prefix for the responsive visual hiding class | 'visually-hidden' | +
$visually-hidden-medium-breakpoint | Breakpoint | +(Optional) Breakpoint of the responsive visual hiding class for medium-sized screens | 768px | +
$visually-hidden-large-breakpoint | Breakpoint | +(Optional) Breakpoint of the responsive visual hiding class for larger screens | 1280px | +
$visually-hidden-small-suffix | String | +Suffix of the responsive visual hiding class on smaller screens | 'sm | +
$visually-hidden-medium-suffix | String | +Suffix of the responsive visual hiding class on medium-sized screens | 'md' | +
$visually-hidden-large-suffix | String | +Suffix of the responsive visual hiding class on larger screens | 'lg' | +
$visually-hidden-use-four-step-grid | Logical | +(Optional) Enables the use of the four-step grid for the responsive visual hiding class | false | +
$visually-hidden-small-breakpoint | Breakpoint | +(Optional) Breakpoint of the responsive visual hiding class for smaller screens (four-step grid only) | 480px | +
$visually-hidden-extra-small-suffix | String | +(Optional) Suffix of the responsive visual hiding class on extra small screens (four-step grid only) | 'xs' | +
@include make-visually-hidden-responsive ('visually-hidden', 768px, 1280px, 'sm', 'md', 'lg', true, 480px, 'xs');+
If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.
diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index e0d6225..2b7a03e 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -976,3 +976,4 @@ - Documented `tab` module's customization. - Documented `contextual` module's customization. - Documented `progress` module's customization. +- Documented customization for `utility` module, finishing developer docs (maybe a proofreading is required, but later).