From c282a31089d5c00ed4eaab176a5b986a76d1278d Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Tue, 18 Apr 2017 00:09:16 +0300 Subject: [PATCH] Finished customization docs Added customization documentation for utility module, fixed typos and problems in some others. --- docs/customization/contextual.html | 6 +- docs/customization/progress.html | 10 +- docs/customization/utility.html | 471 +++++++++++++++++++++++++++++ docs/v2/DEVLOG.md | 1 + 4 files changed, 480 insertions(+), 8 deletions(-) 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 @@ - make-mark-alt-color ($mark-alt-name, $mark-alt-back-color. $mark-alt-fore-color) + make-mark-alt-color ($mark-alt-name, $mark-alt-back-color, $mark-alt-fore-color) Creates a new <mark> color variant using the specified values. @@ -353,7 +353,7 @@ - make-alert-alt-color ($alert-alt-name, $alert-alt-back-color. $alert-alt-fore-color) + make-alert-alt-color ($alert-alt-name, $alert-alt-back-color, $alert-alt-fore-color) Creates a new alert color variant using the specified values. @@ -438,7 +438,7 @@ - make-tooltip-alt-color ($tooltip-alt-name, $tooltip-alt-back-color. $tooltip-alt-fore-color) + make-tooltip-alt-color ($tooltip-alt-name, $tooltip-alt-back-color, $tooltip-alt-fore-color) Creates a new tooltip color variant using the specified values. diff --git a/docs/customization/progress.html b/docs/customization/progress.html index d6dba44..f96402f 100644 --- a/docs/customization/progress.html +++ b/docs/customization/progress.html @@ -153,7 +153,7 @@ $spinner-donut-sizeSize (single value, px preferred) - The size of donut spinner components (determines multiple values of the elements)20px + The size of donut spinner components (determines multiple values of the element)20px
@@ -175,7 +175,7 @@ - make-progress-alt-color ($progress-alt-name, $progress-alt-fore-color. $progress-alt-back-color) + make-progress-alt-color ($progress-alt-name, $progress-alt-fore-color, $progress-alt-back-color) Creates a new <progress> color variant using the specified values. @@ -235,7 +235,7 @@ $progress-alt-border-styleBorder - (Optional) Border stylefor the <progress> style variant1px solid #bdbdbd + (Optional) Border style for the <progress> style variant1px solid #bdbdbd $progress-alt-border-radiusBorder radius @@ -287,7 +287,7 @@ - make-spinner-donut-alt-color ($spinner-donut-alt-name, $spinner-donut-alt-back-color. $spinner-donut-alt-fore-color) + make-spinner-donut-alt-color ($spinner-donut-alt-name, $spinner-donut-alt-back-color, $spinner-donut-alt-fore-color) Creates a new donut spinner color variant using the specified values. @@ -331,7 +331,7 @@ $spinner-donut-alt-sizeSize (single value, px preferred) - Size of the donut spinner style variant32px + Size of the donut spinner style variant (determines multiple values of the element)32px $spinner-donut-alt-border-thicknessBorder width diff --git a/docs/customization/utility.html b/docs/customization/utility.html index 2d551eb..c7e4f8c 100644 --- a/docs/customization/utility.html +++ b/docs/customization/utility.html @@ -66,6 +66,477 @@ +
+
+
+

Visibility helpers & legacy features

+
+

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.


+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Variables
VariableTypeDescriptionSample value
$hidden-nameStringClass name for hidden elements'hidden'
$visually-hidden-nameStringClass name for visually hidden elements'visually-hidden'
$include-floatsLogicalEnables floats (legacy feature)1false
$float-prefixStringClass prefix for float classes1'float'
$include-clearfixLogicalEnables the clearfix (legacy feature)2false
$clearfix-nameStringClass name for clearfix2'clearfix'
$include-center-blockLogicalEnables the center block (legacy feature)3false
$center-block-nameStringClass name for center block3'center-block'

+
+
+

Notes:

+
    +
  1. The value of $float-prefix will only be used if $include-floats is set to true.
    2. +
  2. The value of $clearfix-name will only be used if $include-clearfix is set to true.
    3. +
  3. The value of $center-block-name will only be used if $include-center-block is set to true.
    4. +
+
+
+
+
+ +
+
+
+

Breadcrumbs

+
+

The utility module's breadcrumbs use a custom class and a few varaibles to allow you to customize their appearance.


+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Variables
VariableTypeDescriptionSample value
$breadcrumbs-nameStringClass name for the breadcrumbs component'breadcrumbs'
$breadcrumbs-back-colorColorBackground color for the breadcrumbs component#e0e0e0
$breadcrumbs-marginMarginMargin for the breadcrumbs component10px
$breadcrumbs-heightHeightHeight for the breadcrumbs component32px
$breadcrumbs-separator-widthWidthWidth of the breadcrumbs component's separator2px
$breadcrumbs-border-styleBorderBorder style for the breadcrumbs component1px solid #bdbdbd
$breadcrumbs-border-radiusBorder radiusBorder radius for the breadcrumbs component4px
$breadcrumbs-box-shadowBox shadowBox shadow for the breadcrumbs component0 1px 3px rgba(0,0,0, 0.1)

+
+
+
+
+ +
+
+
+

Close icon

+
+

The utility module's close icon uses a custom class and a few variable to customize its appearance.


+ + + + + + + + + + + + + + + + + + + + + + + +
Variables
VariableTypeDescriptionSample value
$close-icon-nameStringClass name for the close icon component'close'
$close-icon-sizeFont sizeSize of the close icon component32px
$close-icon-back-colorColorBackground color for the close icon component#e0e0e0
$close-icon-fore-colorColorForeground color for the close icon component#212121

+
+
+
+
+ +
+
+
+

Generic border & shadow mixins

+
+

The utility module contains a few mixins for creating generic borders, border styles and shadows.


+ + + + + + + + + + + + + + + + + + + +
Mixin definitions
MixinDescription
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.

+ + + + + + + + + + + +
make-border-generic
ParameterTypeDescriptionSample value
$border-generic-nameStringClass name for the generic border class'bordered'

+

Sample usage

+ 
@include make-border-generic ('bordered');
+
+ + + + + + + + + + + + + + + +
make-border-radial-style
ParameterTypeDescriptionSample value
$border-radial-nameStringClass name for the generic radial border class'rounded'
$border-radial-radiusBorder radiusBorder radius for the generic radial border class2px

+

Sample usage

+ 
@include make-border-radial-style ('rounded', 2px);
+
+ + + + + + + + + + + + + + + +
make-box-shadow-generic
ParameterTypeDescriptionSample value
$box-shadow-nameStringClass name for the generic box shadow class'shadow-small'
$box-shadow-valueBox shadowBox shadow for the generic box shadow class0 1px 3px rgba(0,0,0, 0.1)

+

Sample usage

+ 
@include make-box-shadow-generic ('shadow-small', 0 1px 3px rgba(0,0,0, 0.1));
+
+
+
+
+
+ +
+
+
+

Responsive sizing & spacing mixins

+
+

The utility module contains a couple of mixins for creating responsive sizing and spacing classes.


+ + + + + + + + + + + + + + + +
Mixin definitions
MixinDescription
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.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
make-margin-responsive
ParameterTypeDescriptionSample value
$margin-nameStringClass name for the responsive margin class'urgent'
$margin-small-valueMarginMargin of the responsive margin class on smaller screens4px
$margin-medium-valueMarginMargin of the responsive margin class on medium-sized screens6px
$margin-large-valueMarginMargin of the responsive margin class on larger screens8px
$margin-medium-breakpointBreakpoint(Optional) Breakpoint of the responsive margin class for medium-sized screens768px
$margin-large-breakpointBreakpoint(Optional) Breakpoint of the responsive margin class for larger screens1280px
$margin-use-four-step-gridLogical(Optional) Enables the use of the four-step grid for the responsive margin classfalse
$margin-small-breakpointBreakpoint(Optional) Breakpoint of the responsive margin class for smaller screens (four-step grid only)480px
$margin-extra-small-valueMargin(Optional) Margin of the responsive margin class on extra small screens (four-step grid only)2px

+

Sample usage

+ 
@include make-margin-responsive ('responsive-margin', 4px, 6px, 8px, 768px, 1280px, true, 480px, 2px);
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
make-padding-responsive
ParameterTypeDescriptionSample value
$padding-nameStringClass name for the responsive padding class'urgent'
$padding-small-valuePaddingPadding of the responsive padding class on smaller screens4px
$padding-medium-valuePaddingPadding of the responsive padding class on medium-sized screens6px
$padding-large-valuePaddingPadding of the responsive padding class on larger screens8px
$padding-medium-breakpointBreakpoint(Optional) Breakpoint of the responsive padding class for medium-sized screens768px
$padding-large-breakpointBreakpoint(Optional) Breakpoint of the responsive padding class for larger screens1280px
$padding-use-four-step-gridLogical(Optional) Enables the use of the four-step grid for the responsive padding classfalse
$padding-small-breakpointBreakpoint(Optional) Breakpoint of the responsive padding class for smaller screens (four-step grid only)480px
$padding-extra-small-valuePadding(Optional) Padding of the responsive padding class on extra small screens (four-step grid only)2px

+

Sample usage

+ 
@include make-padding-responsive ('responsive-padding', 4px, 6px, 8px, 768px, 1280px, true, 480px, 2px);
+
+
+
+
+
+ +
+
+
+

Responsive visibility helper mixins

+
+

The utility module contains a couple of mixins for creating responsive visibility helpers.


+ + + + + + + + + + + + + + + +
Mixin definitions
MixinDescription
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.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
make-hidden-responsive
ParameterTypeDescriptionSample value
$hidden-prefixStringClass prefix for the responsive hiding class'hidden'
$hidden-medium-breakpointBreakpoint(Optional) Breakpoint of the responsive hiding class for medium-sized screens768px
$hidden-large-breakpointBreakpoint(Optional) Breakpoint of the responsive hiding class for larger screens1280px
$hidden-small-suffixStringSuffix of the responsive hiding class on smaller screens'sm
$hidden-medium-suffixStringSuffix of the responsive hiding class on medium-sized screens'md'
$hidden-large-suffixStringSuffix of the responsive hiding class on larger screens'lg'
$hidden-use-four-step-gridLogical(Optional) Enables the use of the four-step grid for the responsive hiding classfalse
$hidden-small-breakpointBreakpoint(Optional) Breakpoint of the responsive hiding class for smaller screens (four-step grid only)480px
$hidden-extra-small-suffixString(Optional) Suffix of the responsive hiding class on extra small screens (four-step grid only)'xs'

+

Sample usage

+ 
@include make-hidden-responsive ('hidden', 768px, 1280px, 'sm', 'md', 'lg', true, 480px, 'xs');
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
make-visually-hidden-responsive
ParameterTypeDescriptionSample value
$visually-hidden-prefixStringClass prefix for the responsive visual hiding class'visually-hidden'
$visually-hidden-medium-breakpointBreakpoint(Optional) Breakpoint of the responsive visual hiding class for medium-sized screens768px
$visually-hidden-large-breakpointBreakpoint(Optional) Breakpoint of the responsive visual hiding class for larger screens1280px
$visually-hidden-small-suffixStringSuffix of the responsive visual hiding class on smaller screens'sm
$visually-hidden-medium-suffixStringSuffix of the responsive visual hiding class on medium-sized screens'md'
$visually-hidden-large-suffixStringSuffix of the responsive visual hiding class on larger screens'lg'
$visually-hidden-use-four-step-gridLogical(Optional) Enables the use of the four-step grid for the responsive visual hiding classfalse
$visually-hidden-small-breakpointBreakpoint(Optional) Breakpoint of the responsive visual hiding class for smaller screens (four-step grid only)480px
$visually-hidden-extra-small-suffixString(Optional) Suffix of the responsive visual hiding class on extra small screens (four-step grid only)'xs'

+

Sample usage

+ 
@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).