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
How vexingly quick daft zebras jump!
How vexingly quick daft zebras jump!
How vexingly quick daft zebras jump!
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>
public LayoutConfig()
{
FontSize = new FontScale()
{
Xs = "0.75rem",
Sm = "0.875rem",
Md = "1rem",
Lg = "1.125rem"
};
// ...
}
Line Height
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.
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.
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.
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>
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>
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>
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
focus
disabled
divider
<div class="opacity-hover ..."></div>
<div class="opacity-focus ..."></div>
<div class="opacity-disabled ..."></div>
<div class="opacity-divider ..."></div>
public LayoutConfig()
{
DisabledOpacity = .6;
FocusOpacity = .7;
HoverOpacity = .8;
DividerOpacity = .15;
// ...
}
Full
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)"
};
}
Customization
For detailed layout customization examples, visit the Customizing Theme page.
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; }
}