Receptsamlingen

Det här är ett referensdokument, kom hit när du behöver minnas hur ett recept ser ut. Varje recept har ett namn, koden, och den vanligaste fallgropen. Recepten är ordnade efter när de dyker upp i kursen, och de flesta har en del där receptet förklaras rad för rad. Kopiera koden fritt in i dina projekt, det är poängen med ett recept.

Hur du läser en skiss

När du tittar på en wireframe eller en färdig sida, leta efter de återkommande blocken innan du skriver kod:

Ligger texten i en läsbar kolumn?      Containern
Finns en meny?                          Nav-receptet
Sidofält bredvid huvudinnehåll?         Sidebaren
Innehåll i lådor med rubrik och knapp?  Kortet
Rund profilbild, mätare, badge?         Komponentrecepten
Fullskärmsyta med rubrik och knapp?     Heron

De flesta sidor kombinerar flera recept. Känner du igen blocket har du troligen redan receptet.

Tema 1: Webbens byggstenar

Containern

“Håll texten i en läsbar kolumn: aldrig bredare än så här, men krymp om skärmen kräver.”

main {
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
}

max-width, aldrig fast width. En fast bredd ger horisontell scroll på mobilen (fast width-fällan).

Förklaras i Container & läsvänlighet.

Nav-receptet

“En meny är en lista av val: på en rad, med klickytor som går att träffa.”

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1rem;
}

nav a {
    text-decoration: none;
    padding: 0.6rem 0.8rem;
    display: block;
}

Mät klickytan i mobilvy: kursens mål är minst 44 pixlar, och det är paddingen som skapar ytan.

Förklaras i Navigationsstruktur.

Tema 2: Den anslutna webben

Designsystemet

“Alla designbeslut på ett ställe, ändra en rad och hela sidan följer med.”

:root {
    /* Färger */
    --color-primary: #0d1b2a;
    --color-accent: #3a7bd5;
    --color-bg: #f0f4f8;
    --color-text: #1a1a2e;

    /* Spacing */
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 2rem;
}

Läs ut värdena med var(): color: var(--color-primary);

CSS säger inte ifrån om du stavar fel på ett variabelnamn, regeln ignoreras tyst. Felsök i DevTools Computed.

Förklaras i CSS-variabler.

Sidebaren

“Ett smalt sidofält bredvid en bred huvuddel, staplar sig själv på mobilen, helt utan media queries.”

<div class="wrapper">
    <aside class="sidebar"><!-- det korta --></aside>
    <main class="main"><!-- det långa --></main>
</div>

.wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.sidebar {
    flex-grow: 1;
    flex-basis: 250px;
}

.main {
    flex-grow: 999;
    flex-basis: 0;
    min-width: 50%;
}

flex-wrap: wrap är raden som gör layouten responsiv. Utan den mosas kolumnerna ihop på mobilen.

Förklaras i Sidebar-layouten.

Runda porträttet

“En kvadratisk bild, en rad CSS, en perfekt cirkel.”

.profile-img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 4px solid var(--color-primary);
}

Kräver en kvadratisk originalbild (t.ex. 400×400). En rektangulär bild blir oval som ett ägg. Beskär till 1:1 först.

Skillbaren

“Två nästlade lådor: den yttre är skalan, den inres bredd är nivån.”

<div class="skill">
    <p>HTML & CSS</p>
    <div class="skill-bar">
        <div class="skill-progress" style="width: 85%;"></div>
    </div>
</div>

.skill-bar {
    background-color: #e0e0e0;
    border-radius: 10px;
    height: 12px;
    overflow: hidden;
}

.skill-progress {
    background-color: var(--color-primary);
    height: 100%;
}

Bredden sätts inline i HTML (style="width: 85%") eftersom värdet är unikt per rad, kursens enda tillåtna inline-style. Och border-radius + overflow: hidden är paret som klipper hörnen rent.

Utskrifts-CSS:n

“Dölj navigationen och släck bakgrunderna när sidan skrivs ut.”

@media print {
    nav {
        display: none;
    }

    body {
        background: white;
        color: black;
    }
}

Testa med Ctrl+P (Mac: Cmd+P) och titta på förhandsvisningen.

Tema 3: Gränssnitt & komponenter

Knappen

“Liten text, stor träffyta: padding skapar ytan, inte width och height.”

.btn {
    font-size: 0.875rem;
    padding: 0.75rem 1.5rem;
    display: inline-block;
}

Aldrig fast width/height för att göra en knapp stor. Padding skalar med text och zoom, fasta mått går sönder.

Förklaras i Hit areas.

Kortet

“En rubrik, en textrad och en tydlig handling, i en låda som tål att stå i grupp.”

<article class="card">
    <h3>Rubrik</h3>
    <p>En kort text som säljer innehållet.</p>
    <a href="#" class="btn">Läs mer</a>
</article>

.card {
    padding: 1.5rem;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

Flera kort i rad? Sätt display: flex; gap: 1.5rem; på en förälder och flex: 1 på varje kort, så delar de raden lika.

Läs mer-länken är Knappen-receptet ovanför, glöm inte dess träffyta. Och rubriknivån är inte alltid <h3>: kortet ärver sin plats i sidans rubrikstege, kontrollera var det hamnar på just din sida.

Förklaras i Hit areas, och tre kort i rad byggs i Media queries.

Tema 4: Webbprojektet

Badgen

“En liten etikett fastnålad i hörnet av ett kort.”

<article class="card">
    <span class="card__badge">Nyhet</span>
    <!-- kortets innehåll -->
</article>

.card {
    position: relative; /* koordinatsystemet badgen mäter ifrån */
}

.card__badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: var(--color-primary);
    color: white;
    padding: 0.25rem 0.6rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: bold;
}

Glöm inte position: relative på föräldern. Utan den nålas badgen fast i sidans hörn i stället för kortets.

Förklaras i Positionering.

Heron

“En fullskärmssektion med innehållet centrerat i mitten, oavsett skärm.”

.hero {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    text-align: center;
}

Med bakgrundsbild behöver texten ett kontrastlager mellan sig och bilden, en overlay-div först i sektionen:

<section class="hero">
    <div class="hero__overlay"></div>
    <div class="hero__content">...</div>
</section>

.hero {
    position: relative;
    background-color: #222;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.hero__content {
    position: relative;
    z-index: 1;
}

min-height, inte height (innehållet ska kunna växa), dvh, inte vh (mobilens adressfält ljuger om höjden), och alltid en mörk background-color under bilden (annars står vit text på vit botten när bilden inte laddat, och WAVE underkänner kontrasten).

Förklaras i Hero-arkitektur.

Hamburgaren

“En meny som fälls ihop på mobilen, men bara om JavaScript faktiskt är där och kan fälla ut den igen.”

<nav>
    <button class="menu-toggle" aria-expanded="false" aria-controls="nav-links" type="button">
        <span class="sr-only">Öppna menyn</span>
        <span aria-hidden="true">☰</span>
    </button>

    <ul id="nav-links" class="nav-links">
        <li><a href="/">Hem</a></li>
    </ul>
</nav>

document.documentElement.classList.add("js");

const toggle = document.querySelector(".menu-toggle");
const nav = document.querySelector("nav");

toggle.addEventListener("click", () => {
    const isOpen = nav.classList.toggle("open");
    toggle.setAttribute("aria-expanded", String(isOpen));
});

@media (max-width: 40rem) {
    .js .nav-links {
        display: none;
    }

    .js nav.open .nav-links {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
}

Döljregeln gäller bara .js-klassen, som JavaScriptet självt sätter. Utan JS förblir menyn synlig, ingen låses ute. Länkar leder, knappar utför: hamburgaren är en <button>, aldrig en länk. sr-only-klassen och ARIA-attributen förklaras i delen.

Förklaras i Progressiv förbättring.

Hur recept kombineras

De flesta sidor är recept staplade på varandra. CV-projektet (Tema 2) kombinerar:

Designsystemet     -> :root med brandets färger
Containern         -> läsbar huvuddel
Sidebaren          -> profil bredvid innehåll
Runda porträttet   -> profilbilden i sidofältet
Skillbaren         -> kompetensmätarna
Utskrifts-CSS:n    -> CV:t ska tåla papper

Företagssidan (Tema 4) lägger till:

Nav-receptet       -> menyn
Heron              -> första intrycket
Kortet             -> produktkorten
Badgen             -> etiketten i kortets hörn
Hamburgaren        -> menyn på mobilen

Ser du ett recept inuti ett annat stämmer det, en badge bor i ett kort som bor i en container.