Typography and Text Scaling
The framework provides a set of predefined font sizes using rpx units to ensure consistency across different device screens.
| Utility Class | Usage Scenario | CSS Definition |
|---|---|---|
.text-xsl | Extra large display (e.g., icons, statistics) | font-size: 120rpx; |
.text-sl | Large display elements | font-size: 80rpx; |
.text-xxl | Prominent numbers (e.g., currency values) | font-size: 44rpx; |
.text-xl | Page headers and titles | font-size: 36rpx; |
.text-lg | Subheadings and primary content | font-size: 32rpx; |
.text-df | Default body text | font-size: 28rpx; |
.text-sm | Secondary or auxiliary information | font-size: 24rpx; |
.text-xs | Labels and disclaimers | font-size: 20rpx; |
Text alignment is handled through intuitive utility classes:
| Class Name | CSS Property |
|---|---|
.text-left | text-align: left; |
.text-center | text-align: center; |
.text-right | text-align: right; |
Flex Layout System
Fixed Percentage Widths
When a parent container has flex and flex-wrap applied, children can utilize fixed basis classes to occupy specific percentage widths.
| Class Name | Width Percentage | Definition |
|---|---|---|
.basis-xs | 20% | flex-basis: 20%; |
.basis-sm | 40% | flex-basis: 40%; |
.basis-df | 50% | flex-basis: 50%; |
.basis-lg | 60% | flex-basis: 60%; |
.basis-xl | 80% | flex-basis: 80%; |
Proportional Scaling
For dynamic layouts, flex-grow utilities allow child elements to share available space proportionally.
| Class Name | Behavior | Definition |
|---|---|---|
.flex-sub | Equal width distribution | flex: 1; |
.flex-twice | Double width ratio | flex: 2; |
.flex-treble | Triple width ratio | flex: 3; |
Alignment Utilities
Horizontal and vertical alignment within flex containers is managed by adding specific classes to the parent element.
Horizontal (Main Axis):
.justify-start: Aligns items to the left (flex-start)..justify-end: Aligns items to the right (flex-end)..justify-center: Centers items..justify-between: Evenly spaces items with no space at edges..justify-around: Evenly spaces items with equal space around them.
Vertical (Cross Axis):
.align-start: Aligns to top..align-end: Aligns to bottom..align-center: Vertically centers items.
Spacing: Margins and Padding
Spacing utilities follow a structured naming convention: .{property}-{direction}-{size}.
Five size variants are available: xs (10rpx), sm (20rpx), df (30rpx), lg (40rpx), and xl (50rpx).
| Property | Direction Keys |
|---|---|
| Margin | margin-lr (left/right), margin-tb (top/bottom), or specific sides (top, bottom, left, right). |
| Padding | padding-lr, padding-tb, or specific sides. |
Iconography
Icons are rendered using the text component with the class cuIcon-{name}. Most icons support a filled variant by appending fill to the name.
<!-- Example: Rendering a filled attention icon -->
<text class="cuIcon-attentionfill text-red"></text>Decorative Styles
Various utility classes exist for visual enhancements:
- Shadows:
.shadow-warpapplies a standard shadow, while.shadow-blurcreates a diffuse effect based on the background. - Borders: Use
.solid-rightor.solid-bottomto add separator lines to specific edges of an element.
Box Model Fundamentals
Understanding the distinction between margin and padding is vital for layout control. Margin defines the outer space between the element's border and adjacent elements. Padding defines the inner space between the content and the element's border. Shorthand syntax allows defining values for all four sides (top, right, bottom, left) in a single declaration.
Container Components
For layout structures requiring a footer bar anchored to the bottom of the screen, the .cu-bar class ensures the element spans the available width and positions content appropriately.
<view class="cu-bar bg-white">
<view class="action">Cancel</view>
<view class="action text-blue">Confirm</view>
</view>