Borders

border classes provide powerful tools for designing and styling web elements. With these classes, you can easily set the color, width, type, and radius of borders. These features allow you to create precise and beautiful designs with minimal coding and quickly respond to design changes.

Basic Classes #

To manage borders in MIZ, several different classes are provided:

• Border Color Classes: For setting border colors.

• Border Width Classes: For defining border widths.

• Border Radius Classes: For setting the corner radius of borders.

• Border type Classes: For defining the border style (e.g., solid or dotted).

Color Settings #

To set border colors:

1. Add new colors to the color palette.

2. Register the added colors in the `colors` variable to generate the related classes.

                    <div class="border-primary-color"></div>
                    
HTML

                

Border Opacity #

To change the opacity and style of borders, related classes are available, such as: `border-solid` for solid borders , border-dotted for dotted borders or Other similar classes for different styles.

                    <div class="border-dashed"></div>
                    
HTML

                

Border Width #

To set the border width:

1. Refer to the dims file located at miz/sass/config/_dims.scss

2. Customize the border width classes using $conf-border-thickness based on your needs.

The created classes for border width will be named border-width and will be built according to the config settings.

Border Radius #

To set the corner radius of borders (especially for circular or rounded designs):

1. Refer to the dims file located at miz/sass/config/_dims.scss

2. Customize the radius classes according to your needs.

                    $all-border-extra-small:2px;
$all-border-small:5px;
$all-border-normal:10px;
$all-border-medium:16px;
$all-border-large:25px;
$all-border-extra-large:50px;
                    
SCSS

                

Suggested classes for border radius:

• all-border-full for border-radius: 100%

• all-border-medium for border-radius: 16px

• all-border-tr for border-top-right-radius: 0px !important

Examples #

                    

                    
HTML

                    <div class="w-100 px-2 d-flex align-items-center primary-color border-width-1 border-solid border-primary-color all-border-normal">
    <p class="primary-color py-2">Example element</p>
</div>
                

                    

                    
HTML

                    <div class="w-100 px-2 d-flex align-items-center primary-color border-width-2 border-dashed border-color all-border-normal">
    <p class="text-color py-2">Example element</p>
</div>
                

                    

                    
HTML

                    <div class="w-31 px-2 d-flex align-items-center primary-color justify-content-center border-width-2 border-solid border-primary-color bg-on-primary-color all-border-full">
    <p class="primary-color py-2">Example element</p>
</div>