# Interface and styling

**Express Summary:** Build the foundation of a Trello-like task management app using blocks, styling, and reusable components for organizing lists and cards.

---

## 1. Project Setup

1. Open Luna Park and navigate to your dashboard
2. Create a new project called "Trebo" (our Trello clone)
3. Right-click in the explorer → Create a new page named "main"

## 2. Main Container Configuration

### Create the base container
- A **block** element appears in the bottom left (this is equivalent to an HTML div)
- Click on the block to open the style panel on the right
- Click the "+" button to add styling:
- **Background**: Choose any temporary color to see the container
- **Height**: Set to 100% so it covers the entire page
- Rename the block to "Container" for better organization

### Set up your design system
- Click the **palette icon** at the top of the interface
- Customize the primary and secondary colors (try a retro wave/violet theme)
- **Automatic benefit**: Luna Park generates color tokens that maintain consistency throughout your app

## 3. Creating the Header

1. Click the "+" button inside your container to add a new block
2. Rename this block to "Header" for clarity
3. Style the header:
- **Background**: Use a "deepest" color token from your palette
- **Height**: Set a fixed height in pixels (example: 60px)
- **Display**: Set to "flex" for layout control
- **Flex-direction**: Set to "column" for vertical alignment
- **Justify-content**: Set to "center" to center content vertically
- **Padding**: Add 16px for internal spacing

### Add the header title
1. Click "+" inside the header block
2. Convert the new block to "Custom text" using the square transformation icon
3. Enter the text "My Trebo Board"
4. Style the title text:
- **Font-weight**: Set to "bold" for emphasis
- **Font-size**: Set to "1.5rem" for a larger, prominent heading

## 4. Building the Main Content Area

1. Create a new block below the header and name it "Content"
2. Add **padding** to create breathing room and prevent cards from touching the edges
3. Configure the layout:
- **Display**: Set to "flex" to arrange cards horizontally
- **Gap**: Set to 12px to create consistent spacing between cards

## 5. Card Creation

### Building the card structure
1. Inside the "Content" block, create a new block named "Card"
2. Apply these essential card styles:
- **Background**: Choose a color token from your palette
- **Width**: Set to 230px (fixed width instead of stretching to 100%)
- **Padding**: Use a spacing token for consistent internal spacing
- **Border-radius**: Set to 12px for rounded corners
- **Display**: Set to "flex" for internal layout control
- **Flex-direction**: Set to "column" to stack content vertically

### Creating the card title
1. Add a "Custom text" element inside your card
2. Enter "To Do" as an example title
3. Style the title:
- **Padding**: Use the "s" (small) spacing token
- **Font-weight**: Set to "bold" to make it stand out as a header

### Adding task items to cards
1. Create several "Custom text" elements to represent individual tasks
2. Use Ctrl+C / Ctrl+V to copy and paste for quick duplication
3. Style each task item:
- **Background**: Choose a slightly lighter color than the card background
- **Padding**: Use the "s" spacing token for consistent internal spacing
- **Border-radius**: Use the "s" border radius token for subtle rounded corners

## 6. Creating an Add Card Button

### Building an interactive add button
1. Create a "Custom text" element with "+ Add a card"
2. Right-click the text → select "Wrap a component" to surround it with a container block
3. Remove the "+" from the text (we'll use a proper icon instead)
4. Add a professional icon from the UI Library:
- Search for and select the "plus" icon
- Set **Font-size** to "XL" to make it clearly visible
5. Align the icon and text:
- Set **Display** to "flex" for horizontal layout
- Set **Align-items** to "center" for perfect vertical alignment

### Adding interactive hover effects
1. Select your add button element
2. Click the "Hover" state button in the styles panel
3. Modify the **background** to a lighter shade for visual feedback
4. Set **cursor** to "pointer" to indicate the element is clickable

## 7. Creating Multiple Cards

### Duplicating cards efficiently
- Select your completed card (including all its styling and content)
- Copy it with Ctrl+C
- Paste with Ctrl+V inside the "Content" area
- Customize each card's content ("In Progress", "Done", "Review", etc.)

### Global add button
1. Use UI Library → Forms → Button
2. Customize the style according to the graphic charter
3. Text: "Add a list"

## Best Practices for Luna Park Development

- **Always name your elements**: Use descriptive names like "Header", "Card", "Content" for easy organization
- **Use design tokens**: Leverage palette tokens to maintain visual consistency across your app
- **Leverage copy-paste**: Duplicate styled elements to maintain consistency and save development time
- **Master flexbox**: Use **Display: flex** and **Gap** properties for professional layouts
- **Add micro-interactions**: Include **hover effects** to make your interface feel responsive
- **Explore the UI Library**: Take advantage of pre-built components to accelerate development

---

*Next episode: code factorization to avoid repetition and improve readability.*