Styleguide

Kleuren

De kleuren worden elke helft van het semester veranderd. Elke semester heeft dezelfde custom properties, maar met andere kleuren binnen die properties.

                
.semester-1-midterm {
    --semester-primary: #00ff77;
    --semester-secondary: #222222;
    --text-primary: #000000;
    --text-secondary: white;
}

.semester-1-endterm {
    --semester-primary: #aaff00;
    --semester-secondary: #556B2F;
    --text-primary: #000000;
    --text-secondary: white;
}

Deze classes bevatten alle kleuren. Om deze kleuren te gebruiken, is een tweede class nodig die gebruikmaakt van de custom properties in de bovenstaande classes.

                
.primary {
    background-color: var(--semester-primary);
}

.secondary {
    background-color: var(--semester-secondary);
}

.neutral {
    background-color: var(--semester-neutral);
}

.text-primary {
    color: var(--text-primary);
}

in html ziet her er zo uit:

                
<section class="semester-1-endterm text-primary primary"></section>

Als je in CSS de custom property "--semester-secondary" wilt gebruiken, wordt de waarde ervan overgenomen van de class waartoe het HTML-element behoort. Dus als een container in HTML de class semester-1-midterm heeft, wordt de waarde van "--semester-secondary" uit deze class gehaald. Als het element in de class semester-1-endterm staat, krijgt het een andere kleur. Op deze manier kun je eenvoudig de kleuren per semester aanpassen zonder te veel te veranderen. voorbeeld, we hebben hieronder deze sections, met precies dezelfde css

                
<section class="semester-1-midterm text-primary primary"></section>

<section class="semester-1-endterm text-primary primary"></section>

<section class="semester-1-midterm"></section>
<section class="semester-1-endterm"></section>

Inspecteer mij: De achtergrondkleur wordt aangegeven in de HTML

Inspecteer mij: De achtergrondkleur wordt aangegeven in CSS

Typografie

h1: De titel van de pagina

h2: De titel van een check out

h3: De datum van een checkout

h4: Een subtitel van een checkout

fonts

Voor de 'I Love Web'-pagina wordt het lettertype 'Lora' gebruikt. Dit is ingesteld via een class In de toekomst, als ik een andere class wil gebruiken, kan ik een nieuwe class maken met een ander lettertype en dit per sectie aanroepen. Dit de CSS en HTML voor fonts

                
.font-lora {
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-weight: 450;
    font-style: normal;
}

                
<body class="font-lora"></body>

check outs

De container voor een checkout is een article element Daarin wordt eerst een h2 en h3 element gebruikt om aan te geven van welke sprint deze checkout is en om de datum van vandaag weer te geven. Daarna worden p elementen gebruikt voor elke alinea Voorbeeld:

                    
<article>
<h2>Sprint 1: Your Tribe</h2>
<h3>Datum: 4/9/24</h3>
<p>
    Vandaag heb ik een breakdownschets gemaakt.
    Dat is een schets van de website die ik wil bouwen,
    met daarin elementen die ik zou kunnen gebruiken.
</p>
<p>
    Ik heb ook gewerkt aan mijn visitekaartje.
    Ik heb een lijst toegevoegd met behulp van <dt> en <dd>.
    Deze tags waren in de templatecode.
    Ik heb ze nu aangepast en op een nieuwe manier ingedeeld met behulp van een <ul>.
</p>
</article>

Unorderd list

HTML input - web output ul zonde4r class neemt een nieuwe regel voor elke li ul met de class "dash" krijgt een "-" voor voor elke li

                        
<ul>
    <li>sprint</li>
    <li>mobiel:
        <ul>
            <li>alle radiozenders in 1 oogopzicht</li>
        </ul>
    </li>
    <li>desktop:
        <ul>
            <li>1 list voor de tijd lijn</li>
            <li>1 list voor de week dagen</li>
        </ul>
    </li>
</ul>

sprint
mobiel:
- alle radiozenders in 1 oogopzicht
desktop:
- 1 list voor de tijd lijn
- 1 list voor de week dagen

                        
<ul class="dash">
    <li>sprint</li>
    <li>mobiel:
        <ul>
            <li>alle radiozenders in 1 oogopzicht</li>
        </ul>
    </li>
    <li>desktop:
        <ul>
            <li>1 list voor de tijd lijn</li>
            <li>1 list voor de week dagen</li>
        </ul>
    </li>
</ul>

sprint
mobiel:
- alle radiozenders in 1 oogopzicht
desktop:
- 1 list voor de tijd lijn
- 1 list voor de week dagen

anchor tags

a element zonder class nemen altijd een nieuwe regel Een a element met de class "a-inline" blijft op dezelfde regel, De link blijft in de tekst

                        
<a href="#" >breakdown schets 1</a>
<a href="#" >breakdown schets 2</a>

breakdown schets 1 breakdown schets 2

                        
<a class="a-inline" href="#" >breakdown schets 1</a>
<a class="a-inline" href="#" >breakdown schets 2</a>

breakdown schets 1 breakdown schets 2