Customization

Layout

Layout configuration simplifies managing and customizing key interface aspects like typography, shadows and more.

Overview

LumexUI’s layout configuration allows you to fine-tune the design of the components. You can customize key properties such as typography, border radius, and shadows. Additionally, you can define the opacity levels for disabled, focused, hovered, and divider elements, providing you with full control over your application's layout and visual consistency.

Typography and shadows were specifically defined for the customization of components and may differ from the default settings provided by Tailwind CSS for similar configurations.

Default Configuration

Below are the default layout configuration settings.

Font Size

text-tiny

How vexingly quick daft zebras jump!

text-small

How vexingly quick daft zebras jump!

text-medium

How vexingly quick daft zebras jump!

text-large

How vexingly quick daft zebras jump!

<p class="text-tiny">How vexingly quick daft zebras jump!</p>
<p class="text-small">How vexingly quick daft zebras jump!</p>
<p class="text-medium">How vexingly quick daft zebras jump!</p>
<p class="text-large">How vexingly quick daft zebras jump!</p>
LayoutConfig.cs
public LayoutConfig()
{
    FontSize = new FontScale()
    {
        Xs = "0.75rem",
        Sm = "0.875rem",
        Md = "1rem",
        Lg = "1.125rem"
    };
    // ...
}

Line Height

leading-tiny

Jake thought he was making a smoothie, but halfway through blending, he realized he had added his dog's kibble instead of chia seeds. Determined not to waste food, he took a sip, only to find his dog staring at him in confusion. Now, every morning, they share breakfast—Jake with kibble, and the dog with chia seeds.

leading-small

Jake thought he was making a smoothie, but halfway through blending, he realized he had added his dog's kibble instead of chia seeds. Determined not to waste food, he took a sip, only to find his dog staring at him in confusion. Now, every morning, they share breakfast—Jake with kibble, and the dog with chia seeds.

leading-medium

Jake thought he was making a smoothie, but halfway through blending, he realized he had added his dog's kibble instead of chia seeds. Determined not to waste food, he took a sip, only to find his dog staring at him in confusion. Now, every morning, they share breakfast—Jake with kibble, and the dog with chia seeds.

leading-large

Jake thought he was making a smoothie, but halfway through blending, he realized he had added his dog's kibble instead of chia seeds. Determined not to waste food, he took a sip, only to find his dog staring at him in confusion. Now, every morning, they share breakfast—Jake with kibble, and the dog with chia seeds.

<p class="leading-tiny">Jake thought he was making a smoothie...</p>
<p class="leading-small">Jake thought he was making a smoothie...</p>
<p class="leading-medium">Jake thought he was making a smoothie...</p>
<p class="leading-large">Jake thought he was making a smoothie...</p>
LayoutConfig.cs
public LayoutConfig()
{
    LineHeight = new FontScale()
    {
        Xs = "1rem",
        Sm = "1.25rem",
        Md = "1.5rem",
        Lg = "1.75rem"
    };
    // ...
}

Border Radius

rounded-small

rounded-medium

rounded-large

<div class="rounded-tr-small ..."></div>
<div class="rounded-tr-medium ..."></div>
<div class="rounded-tr-large ..."></div>
LayoutConfig.cs
public LayoutConfig()
{
    Radius = new BaseScale()
    {
        Sm = "0.375rem",
        Md = "0.625rem",
        Lg = "0.875rem"
    };
    // ...
}

Box Shadow

shadow-small

shadow-medium

shadow-large

<div class="shadow-small ..."></div>
<div class="shadow-medium ..."></div>
<div class="shadow-large ..."></div>
LayoutConfig.cs
public LayoutConfig()
{
    Shadow = new BaseScale()
    {
        Sm = "0px 0px 5px 0px rgba(0,0,0,.02), 0px 2px 10px 0px rgba(0,0,0,.06), 0px 0px 1px 0px rgba(0,0,0,.15)",
        Md = "0px 0px 15px 0px rgba(0,0,0,.03), 0px 2px 30px 0px rgba(0,0,0,.08), 0px 0px 1px 0px rgba(0,0,0,.15)",
        Lg = "0px 0px 20px 0px rgba(0,0,0,.04), 0px 2px 50px 0px rgba(0,0,0,.1), 0px 0px 1px 0px rgba(0,0,0,.15)"
    };
    // ...
}

Opacity

hover

0.8

focus

0.7

disabled

0.6

divider

0.15
<div class="opacity-hover ..."></div>
<div class="opacity-focus ..."></div>
<div class="opacity-disabled ..."></div>
<div class="opacity-divider ..."></div>
LayoutConfig.cs
public LayoutConfig()
{
    DisabledOpacity = .6;
    FocusOpacity = .7;
    HoverOpacity = .8;
    DividerOpacity = .15;
    // ...
}

Full

LayoutConfig.cs
public LayoutConfig()
{
    DisabledOpacity = .6;
    FocusOpacity = .7;
    HoverOpacity = .8;
    DividerOpacity = .15;

    FontSize = new FontScale()
    {
        Xs = ".75rem",
        Sm = ".875rem",
        Md = "1rem",
        Lg = "1.125rem"
    };

    LineHeight = new FontScale()
    {
        Xs = "1rem",
        Sm = "1.25rem",
        Md = "1.5rem",
        Lg = "1.75rem"
    };

    Radius = new BaseScale()
    {
        Sm = ".375rem",
        Md = ".625rem",
        Lg = ".875rem"
    };

    Shadow = new BaseScale()
    {
        Sm = "0px 0px 5px 0px rgba(0,0,0,.02),0px 2px 10px 0px rgba(0,0,0,.06),0px 0px 1px 0px rgba(0,0,0,.15)",
        Md = "0px 0px 15px 0px rgba(0,0,0,.03),0px 2px 30px 0px rgba(0,0,0,.08),0px 0px 1px 0px rgba(0,0,0,.15)",
        Lg = "0px 0px 20px 0px rgba(0,0,0,.04),0px 2px 50px 0px rgba(0,0,0,.1),0px 0px 1px 0px rgba(0,0,0,.15)"
    };
}

Types

BaseScale 

/// <summary>
/// Represents a base size scale.
/// </summary>
public record BaseScale
{
    public string? Sm { get; set; }
    public string? Md { get; set; }
    public string? Lg { get; set; }
}

FontScale 

/// <summary>
/// Represents a font scale.
/// </summary>
public record FontScale : BaseScale
{
    public string? Xs { get; set; }
}
An unhandled error has occurred. Reload 🗙