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.

File Structure #

The file for border settings is located at: miz/sass/config/responsive/boots/_borders.scss

Borders Config #

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

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.

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=" 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>
<div class=" px-2 d-flex align-items-center primary-color border-width-1 border-solid border-primary-color all-border-large">
    <p class="primary-color py-2">Example element</p>
</div>
<div class=" px-2 d-flex align-items-center primary-color border-width-1 border-solid border-primary-color all-border-medium">
    <p class="primary-color py-2">Example element</p>
</div>
<div class=" px-2 d-flex align-items-center primary-color border-width-1 border-solid border-primary-color all-border-small">
    <p class="primary-color py-2">Example element</p>
</div>
<div class=" px-2 d-flex align-items-center primary-color border-width-1 border-solid border-primary-color all-border-extra-large">
    <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>