CSS & Svelte Fundamentals

The playground philosophy: mobile-first, CSS-powered, learn by building.

1. The Box Model

Every HTML element is a box with 4 layers, inside → out:

.card {
  width: 200px;
  padding: 20px;      /* 20px inside on each side */
  border: 5px solid;  /* 5px edge on each side */
  margin: 10px;       /* 10px outside on each side */
}
/* Default total width: 200 + 40 + 10 = 250px */

2. The border-box Trick

By default, width only controls content size. Padding and border add extra width. This is why layouts randomly overflow.

The fix — put this at the top of every project:

*, *::before, *::after {
  box-sizing: border-box;
}

Now width: 200px means 200px total — content shrinks to make room for padding and border. Layouts behave how humans expect.

/* Without border-box: 50% + padding = overflow = broken */
/* With border-box:    padding fits inside 50% = works    */
.column {
  width: 50%;
  padding: 20px;
}

3. Flexbox (1D Layout)

Flexbox arranges children in a row or column. It replaced 15 years of float hacks.

.container {
  display: flex;
}
/* Result: A  B  C (horizontal row) */

The 3 properties that solve 90% of layout

Perfect centering (the famous trick)

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Centers anything. Works every time. */

Navbar example

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* Result: Logo ........... Menu */

Column layout

.container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Result: A
           B
           C */

4. CSS Grid (2D Layout)

Grid controls rows AND columns. Use it for page-level layouts.

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
}
/* Result: Sidebar | Content */

.page {
  display: grid;
  grid-template-rows: auto 1fr auto;
}
/* Result: Header
           Content (fills space)
           Footer */

5. How They Work Together

/* A real webpage uses all three: */

Page (Grid)
 ├ Header (Flexbox)
 │   ├ Logo
 │   └ Nav Links
 │
 ├ Content (Grid or Flexbox)
 │   ├ Sidebar
 │   └ Main Content
 │
 └ Footer

6. The 10 Rules That Cover 80% of CSS

What modern CSS devs almost never use anymore

float, clearfix, table layouts, manual margin spacing everywhere

Modern stack: box-sizing + flexbox + grid + gap. That's the whole game.

7. Where SvelteKit Fits In

SvelteKit doesn't replace CSS — it compiles to normal HTML + CSS + JS. Everything above applies directly inside .svelte files.

<script>
  let name = "Lucas";
</script>

<h1>Hello {name}</h1>

<style>
  h1 {
    color: blue;
  }
</style>

What Svelte adds

Svelte component with Flexbox (real example)

<div class="navbar">
  <h1>My App</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/docs">Docs</a>
  </nav>
</div>

<style>
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
  }
</style>

8. Cheat Sheet

← Back to Playground