Size & Utility Configurations

This section covers border radius, opacity, aspect ratio, z-index and border thickness configuration and their generated CSS outputs.

Border Radius ($border-radius) #

Controls how rounded the corners of elements are. Use all-corner classes for general rounding or directional classes for specific corners.

SCSS Variable:

            

                
SCSS

            
            $border-radius:(
    none: 0px,
    extra-small: 2px,
    small: 5px,
    normal: 10px,
    medium: 16px,
    large: 25px,
    extra-large: 50px,
    full: 1000px
);
        

Example CSS output:

            

                
CSS

            
            /* All corners */
.radius-all-none {
    border-radius: 0px;
}
.radius-all-extra-small {
    border-radius: 2px;
}
.radius-all-small {
    border-radius: 5px;
}
.radius-all-normal {
    border-radius: 10px;
}
.radius-all-medium {
    border-radius: 16px;
}
.radius-all-large {
    border-radius: 25px;
}
.radius-all-extra-large {
    border-radius: 50px;
}
.radius-all-full {
    border-radius: 1000px;
} 

/* Individual corners */  
.radius-tr-none {
    border-top-right-radius: 0px;
}
.radius-tr-extra-small {
    border-top-right-radius: 2px;
}
.radius-tr-small {
    border-top-right-radius: 5px;
}
.radius-tr-normal {
    border-top-right-radius: 10px;
}
.radius-tr-medium {
    border-top-right-radius: 16px;
}
.radius-tr-large {
    border-top-right-radius: 25px;
}
.radius-tr-extra-large {
    border-top-right-radius: 50px;
}
.radius-tr-full {
    border-top-right-radius: 1000px;
}
.radius-tl-none {
    border-top-left-radius: 0px;
}
.radius-tl-extra-small {
    border-top-left-radius: 2px;
}
.radius-tl-small {
    border-top-left-radius: 5px;
}
.radius-tl-normal {
    border-top-left-radius: 10px;
}
.radius-tl-medium {
    border-top-left-radius: 16px;
}
.radius-tl-large {
    border-top-left-radius: 25px;
}
.radius-tl-extra-large {
    border-top-left-radius: 50px;
}
.radius-tl-full {
    border-top-left-radius: 1000px;
} 
.radius-br-none {
    border-bottom-right-radius: 0px;
}
.radius-br-extra-small {
    border-bottom-right-radius: 2px;
}
.radius-br-small {
    border-bottom-right-radius: 5px;
}
.radius-br-normal {
    border-bottom-right-radius: 10px;
}
.radius-br-medium {
    border-bottom-right-radius: 16px;
}
.radius-br-large {
    border-bottom-right-radius: 25px;
}
.radius-br-extra-large {
    border-bottom-right-radius: 50px;
}
.radius-br-full {
    border-bottom-right-radius: 1000px;
}
.radius-bl-none {
    border-bottom-left-radius: 0px;
}
.radius-bl-extra-small {
    border-bottom-left-radius: 2px;
}
.radius-bl-small {
    border-bottom-left-radius: 5px;
}
.radius-bl-normal {
    border-bottom-left-radius: 10px;
}
.radius-bl-medium {
    border-bottom-left-radius: 16px;
}
.radius-bl-large {
    border-bottom-left-radius: 25px;
}
.radius-bl-extra-large {
    border-bottom-left-radius: 50px;
}
.radius-bl-full {
    border-bottom-left-radius: 1000px;
}
        

Opacity ($conf-opacity) #

Creates step-based opacity classes. The number after .opacity- represents the step, not the actual opacity value. Real opacity is step × factor.

SCSS Variable:

            

                
SCSS

            
            $conf-opacity:(
    factor: 0.1
);
        

Example CSS output (factor = 0.1):

            

                
CSS

            
            .opacity-0 {
    opacity: 0;
}
.opacity-1 {
    opacity: 0.1;
}
.opacity-2 {
    opacity: 0.2;
}
.opacity-3 {
    opacity: 0.3;
}
.opacity-4 {
    opacity: 0.4;
}
.opacity-5 {
    opacity: 0.5;
}
.opacity-6 {
    opacity: 0.6;
}
.opacity-7 {
    opacity: 0.7;
}
.opacity-8 {
    opacity: 0.8;
}
.opacity-9 {
    opacity: 0.9;
}
.opacity-10 {
    opacity: 1;
}
        

Example CSS output (factor = 0.25):

            

                
CSS

            
            .opacity-0 {
    opacity: 0;
}
.opacity-1 {
    opacity: 0.25;
}
.opacity-2 {
    opacity: 0.5;
}
.opacity-3 {
    opacity: 0.75;
}
.opacity-4 {
    opacity: 1;
}
        

Aspect Ratio ($conf-aspect-ratio) #

Generates aspect ratio classes to keep elements proportional. Nominator / denominator define the ratio, step determines combinations.

SCSS Variable:

            

                
SCSS

            
            $conf-aspect-ratio:(
    nominator: 2,
    denominator: 4,
    step: 2 
);
        

Example CSS output:

            

                
CSS

            
            .ratio-2-2 {
    aspect-ratio: 2 / 2;
}
.ratio-2-4 {
    aspect-ratio: 2 / 4;
}
.ratio-4-2 {
    aspect-ratio: 4 / 2;
}
.ratio-4-4 {
    aspect-ratio: 4 / 4;
}
        

Z-Index ($conf-z-index) #

Controls stacking order. Classes are generated from min to max using step.

SCSS Variable:

            

                
SCSS

            
            $conf-z-index:(
    min: 0,
    max: 10,
    step: 1 
);
        

Example CSS output:

            

                
CSS

            
            .z-index-0 {
    z-index: 0;
}
.z-index-1 {
    z-index: 1;
}
.z-index-2 {
    z-index: 2;
}
.z-index-3 {
    z-index: 3;
}
.z-index-4 {
    z-index: 4;
}
.z-index-5 {
    z-index: 5;
}
.z-index-6 {
    z-index: 6;
}
.z-index-7 {
    z-index: 7;
}
.z-index-8{
    z-index: 8;
}
.z-index-9 {
    z-index: 9;
}
.z-index-10 {
    z-index: 10;
}
        

Border Thickness ($conf-border-thickness) #

Generates border-width classes from 0 up to last-width. Useful for consistent borders across the project.

SCSS Variable:

            

                
SCSS

            
            $conf-border-thickness:(
    last-width: 10
);
        

Example CSS output:

            

                
CSS

            
            .bw-0 {
    border-width: 0px;
}
.bw-1 {
    border-width: 1px;
}
.bw-2 {
    border-width: 2px;
}
.bw-3 {
    border-width: 3px;
}
.bw-4 {
    border-width: 4px;
}
.bw-5 {
    border-width: 5px;
}
.bw-6 {
    border-width: 6px;
}
.bw-7 {
    border-width: 7px;
}
.bw-8 {
    border-width: 8px;
}
.bw-9 {
    border-width: 9px;
}
.bw-10 {
    border-width: 10px;
}