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        │
│                   │
└───────────────────┘

Now that we have our board component ready, let's connect it to our main page by modifying the +page.svelte file:

<script>
  import Board from '../components/Board.svelte';
</script>

<div class="container">
  <h1>📝 My Kanban Board</h1>
  <Board />
</div>

This demonstrates a key concept in Svelte component composition:

1. We import the Board component using ES6 import syntax
2. We use the component in our template with <Board />
3. The component's contents will appear exactly where we place the tag

This pattern of composing small, focused components into larger ones is fundamental to modern web development. Our main page handles the overall container, while the Board component handles column arrangement.

In this lesson, we've built the structural foundation for our Kanban board. You've learned how to:

• Create a dedicated board component
• Implement responsive Flexbox layouts
• Connect components together through imports

In the practice exercises, you'll:

1. Adjust the flexbox gap and column widths
2. Test different media query breakpoints
3. Experiment with additional visual styles

In our next lesson, we'll replace these placeholder divs with proper column components that can hold tasks. We're following our architectural plan by building from the outside in - first the page, then the board, and next the columns.