` | Container/layout |
| `
` | Paragraph text |
| `` | Inline text |
| `` - `` | Headings |
| `` | Clickable buttons |
| `` | Dropdown menus |
| `` | Progress bars |
### Layout Example
```xml
Welcome
This is a card component.
```
## RCSS Styling
RCSS is CSS with some limitations and extensions.
### Supported Properties
**Layout:**
- `display` (block, inline, inline-block, flex, none)
- `position` (static, relative, absolute, fixed)
- `width`, `height`, `min-width`, `max-width`, `min-height`, `max-height`
- `margin`, `padding` (including directional variants)
- `flex`, `flex-direction`, `flex-wrap`, `justify-content`, `align-items`
- `overflow` (visible, hidden, scroll, auto)
**Visual:**
- `background-color`, `background` (with decorators)
- `color`
- `border`, `border-radius`
- `opacity`
- `box-shadow` (via decorators)
**Typography:**
- `font-family`
- `font-size`
- `font-weight` (normal, bold)
- `font-style` (normal, italic)
- `text-align` (left, center, right)
- `line-height`
- `text-decoration`
### Units
| Unit | Description |
|------|-------------|
| `dp` | Density-independent pixels (recommended) |
| `px` | Pixels |
| `%` | Percentage of parent |
| `em` | Relative to font size |
Always use `dp` for consistent sizing across devices:
```css
.button {
padding: 12dp 24dp;
font-size: 16dp;
border-radius: 8dp;
}
```
### Colors
```css
/* Hex colors */
color: #ffffff;
color: #fff;
color: #00d4ff80; /* with alpha */
/* RGB/RGBA */
color: rgb(255, 255, 255);
color: rgba(0, 212, 255, 0.5);
```
### Pseudo-classes
```css
button {
background-color: #00d4ff;
}
button:hover {
background-color: #00b8e6;
}
button:active {
background-color: #0099cc;
}
button:focus {
border: 2dp solid #ffffff;
}
button:disabled {
opacity: 0.5;
}
```
## Flexbox Layout
RCSS supports flexbox for modern layouts:
```css
.row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.column {
display: flex;
flex-direction: column;
gap: 10dp;
}
.grow {
flex: 1;
}
```
```xml
Left
Right
```
## Images
Images should be in TGA format for best performance:
```xml
United States
United Kingdom
Canada
```
### Progress Bar
```xml