Building the Board Layout

Before we dive into code, let's understand what we need to build next. A Kanban board is essentially a collection of columns, each representing a different stage in your workflow.

For our application, we'll create a board layout with three columns: "To Do," "In Progress," and "Done." These columns will be arranged horizontally on desktop screens and will stack vertically on mobile devices for better usability.

Creating this layout requires two key steps:

1. Building a dedicated Board component that handles the overall arrangement
2. Styling it with Flexbox to achieve responsive behavior

The Board component will serve as a container for our columns, managing their organization and spacing. This component-based approach keeps our code modular and easier to maintain as our application grows.

In our previous lesson, we created the main page structure with +page.svelte. Now, we'll build the Board component - the central element of our Kanban system that will organize and display our task columns.

This step moves us from the outer container to the next layer in our component hierarchy. Remember our application structure from lesson 1:

/src
├── components/
│   ├── Board.svelte             # We're creating this now!
│   ├── Column.svelte            # Coming in lesson 3
│   └── TaskCard.svelte          # Coming in later lessons
└── routes/
    └── +page.svelte             # Created in lesson 1

Let's create a new file called Board.svelte in the src/components directory. This component will be imported into our main page.

<script>
  // The board component will hold our columns
</script>

<div class="board">
  <div class="column-placeholder">To Do</div>
  <div class="column-placeholder">In Progress</div>
  <div class="column-placeholder">Done</div>
</div>

Notice we're using simple <div> elements as placeholders for now. In our next lesson, we'll replace these with proper column components. The important part is establishing the structure first.

Now let's implement the visual layout using Flexbox. We want our columns to display horizontally on desktops and stack vertically on mobile devices:

<style>
  .board {
    display: flex;
    gap: 1rem;
    justify-content: center;
  }
  
  .column-placeholder {
    background: #f4f4f4;
    padding: 1rem;
    width: 300px;
    min-height: 400px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
    font-weight: bold;
  }
  
  @media (max-width: 950px) {
    .board {
      flex-direction: column;
    }
    
    .column-placeholder {
      width: 100%;
    }
  }
</style>

Here's what we're doing with this CSS:

• display: flex on the board container creates our horizontal layout
• gap: 1rem adds consistent spacing between columns
• The media query makes our layout responsive by switching to vertical on smaller screens
• Each column has styling for padding, rounded corners, and a subtle shadow for visual depth

When rendered, our board will look something like this:

Desktop view:
┌───────────┐ ┌───────────┐ ┌───────────┐
│           │ │           │ │           │
│   To Do   │ │In Progress│ │   Done    │
│           │ │           │ │           │
└───────────┘ └───────────┘ └───────────┘

Mobile view:
┌───────────────────┐
│                   │
│       To Do       │
│                   │
└───────────────────┘
┌───────────────────┐
│                   │
│    In Progress    │
│                   │
└───────────────────┘
┌───────────────────┐
│                   │
│       Done        │
│                   │
└───────────────────┘