README
UI CSS KIT
This CSS only library manages global styles, component styles, and low-level utility classes.
Structure
1. Configuration
Global variables (--ald-g-*)
.
- color
(--ald-g-color-*)
- space
(--ald-g-space-*)
- font
- family
(--ald-g-font-stack)
- size
(--ald-g-text-*)
- line height
(--ald-g-leading-*)
- family
- radius
(--ald-g-radius-*)
- breakpoints
(--ald-g-breakpoint-*)
- shadows
(--ald-g-shadow-*)
2. Abstract
Normalize - makes browsers render all elements more consistently and in line with modern standards.
Mixins to generate font sizes and responsive breakpoints.
- Media query
@mixin mediaquery()
- Font size
@mixin font-size()
- Media query
3. Utility
A collection of classes that are generic enough to be widely used.
- layout
- container
.u-container-*
- display
.u-hidden .u-block
- overflow
.u-overflow-*
- position
.u-relative .u-absolute .u-sticky
- top, right, bottom, left locations
.u-*-0
- z-index
.u-z-*
- container
- flexbox
- gap
.u-gap-*
- flexbox
.u-flex-* .u-justify-* .u-items-*
- gap
- spacing
- padding
.u-p-* .u-px-* .u-py-* .u-pt-* .u-pr-* .u-pb-* .u-pl-*
- margin
.u-m-* .u-mx-* .u-my-* .u-mt-* .u-mr-* .u-mb-* .u-ml-*
- padding
- sizing
- width
.u-w-*
- height
.u-h-*
- width
- typography
- font size
.u-text-*
- font stack
.u-font-system
- font weight
.u-font-*
- text color
.u-text-*
- text overflow
.u-truncate .u-overflow-ellipsis
- text transform
.u-uppercase .u-lowercase .u-capitalize u-normal-case
- whitespace
.u-whitespace-*
- word break
.u-break-*
- font size
- ground
- background and foreground
.u-background
.u-foreground
- background color
.u-bg-*
- background and foreground
- border
- color
.u-border-*
- radius
.u-rounded-*
- style
.u-border-*
- width
.u-border-* .u-border-t-* .u-border-r-* .u-border-b-* .u-border-l-*
- color
- effects
- shadow
.u-shadow-*
- shadow
- interactivity
- cursor
.u-cursor-*
- outline
.u-outline-*
- user-select
.u-select-none
- cursor
4. Components
Component themes using CSS variables
- badge
.ald-badge
- button
.ald-btn
- button group
.ald-btn-group
- data item
.ald-data-item
- dropdown
.ald-data-item
- forms
- input
.ald-input
- select
.ald-select
- textarea
.ald-text-area
- radio
.ald-radio
- checkbox
.ald-checkbox
- switch
.ald-switch
- input
- icon
.ald-icon
- spinner
.ui-progress-spinner
- stack
.ald-stack
- table
.ald-table
- tabs
.ald-tabs
- treetable
.ald-treetable
5. Global
App wide rules
- Affects
<h*><body><p>
elements