Skip to Content

Sizes

About

We’ve added a bunch of less variables with predefined values to make the sizes more consistent across Breeze-based themes.

Usage example

selector {
    margin: @4;
    padding: @8;
}

LESS variables

@0:   0;
@0-5: 0.125rem;
@1:   0.25rem;
@1-5: 0.375rem;
@2:   0.5rem;
@2-5: 0.625rem;
@3:   0.75rem;
@3-5: 0.875rem;
@4:   1rem;
@4-5: 1.125rem;
@5:   1.25rem;
@5-5: 1.375rem;
@6:   1.5rem;
@6-5: 1.625rem;
@7:   1.75rem;
@7-5: 1.875rem;
@8:   2rem;
@8-5: 2.125rem;
@9:   2.25rem;
@9-5: 2.375rem;
@10:  2.5rem;
@10-5: 2.625rem;
@11:   2.75rem;
@11-5: 2.875rem;
@12:   3rem;
@12-5: 3.125rem;
@13:   3.25rem;
@13-5: 3.375rem;
@14:   3.5rem;
@14-5: 3.625rem;
@15:   3.75rem;
@15-5: 3.875rem;
@16: 4rem;
@20: 5rem;
@24: 6rem;
@28: 7rem;
@32: 8rem;
@36: 9rem;
@40: 10rem;
@44: 11rem;
@48: 12rem;
@52: 13rem;
@56: 14rem;
@60: 15rem;
@64: 16rem;
@72: 18rem;
@80: 20rem;
@96: 24rem;