Interface and styling

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.