4 Comité oud-west
Locatie: de hallen
Datum: 04 mei
Stichting:
Styleguide
Doel
Het doel van deze pagina is om de huisstyle voor het project van de hallen een duidelijk beelde te geven en te definiëren.
Menu
Alle componenten worden weergeven in hun eigen kopje. In het menu kan je snel door deze pagina scrollen
Kleuren
Basis kleuren
#fff
#f6f6f2
#c2edce
#388087
#000
:root {
--white: #fff;
--grey: #f6f6f2;
--mintgreen: #c2edce;
--blue: #388087;
--black: #000;
}
Typografie
Teksten
Wel doen
- Alle h1, h2 moeten in CAPS zijn (CSS text-transform: uppercase;).
- Tekst in menu of navigatie moet monospace zijn.
- De font-size blijft 16px en gaat niet lager.
- Font type bestaat uit Roboto, Open-sans ,sans-serif. Zie meer hierover onder Fonts.
- De regel afstand moet 1.5 zijn.
- Lange texten mogen maar ongeveer 10-12 woorden op een regel hebben.
Niet doen
- Headers met lowercase; headers in italic.
- Font size onder 16px gebruiken.
- Meer dan 3-4 font sizes gebruiken.
CSS
body {
line-height: 1.5;
}
h1{
text-transform: uppercase;
}
h2{
text-transform: uppercase;
}
p {
max-width: 30em; /* Regel lengte */
}
Fonts
Wel doen
Roboto, open-sans en sans-serif gebruiken. Voorbeeld van font Roboto:
Roboto
Voor menu bar, buttons.
Niet doen
Er moeten niet andere fonts gebruikt worden dan de genoemde fonts op deze pagina.
CSS
* {
font-family: system-ui, -apple-system, Roboto, 'Open Sans', sans-serif;
}
header {
background-color: white;
font-weight: 525;
}
.nav_bar {
font-size: 1em;
}
Structuur
Header
Wel doen
Naam van de website in ALL CAPS. Blijft boven aan de website staan.
Niet doen
Navigatie erin zetten. Als je scrolt gaat hij niet met je mee.
HTML
<header>
<h1> Naam van de website </h1>
</header>
CSS
header {
background-color: white;
margin-bottom: 1rem;
color: #388087;
text-align: center;
}
h1{
text-transform: uppercase;
}
Navigatie
Wel doen
Hamburger menu voor mobiel. Blijft fixed links boven op het scherm. Op desktop is de nav bar fixed boven aan de website. Dus het gaat mee als je aan het scrollen bent.
Niet doen
Niet transparant. Niet weining contrast.
Hamburger menu
HTML
<nav>
<section class="mobileHeader laptopHeader">
<div id="sideMenu" class="sideMenu">
<a class="closebtn material-symbols-outlined" id="closeMenu">close</a>
<a href="#"></a>
<a href="#"></a>
</div>
<span class="menubtn material-symbols-outlined" id="openMenu">menu</span>
</section>
</nav>
CSS
nav{
position: fixed;
top: 0.5em;
}
.sideMenu {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
transition: 0.5s;
padding-top: 1.3em;
}
.sideMenu a {
padding: 0.5em 1em 0.5em 1em;
text-decoration: none;
font-size: 0.8em;
display: block;
transition: 0.3s;
}
.menubtn{
font-size:1.9em;
cursor:pointer;
display:block;
margin: 3% 5%;
}
JS
document.getElementById("closeMenu").addEventListener("click", openMenu);
document.getElementById("closeMenu").addEventListener("click", closeMenu);
function openMenu() {
document.getElementById("sideMenu").style.width = "15vw";
}
function closeMenu() {
document.getElementById("sideMenu").style.width = "0";
}
Nav bar
HTML
<nav>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</nav>
CSS
nav{
background-color: var(--blue);
text-align: center;
}
nav ul{
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
justify-content: center;
list-style: none;
}
nav ul li{
padding: 1em;
width: 20vw;
}
nav a{
color:var(--white);
text-decoration: none;
}
nav a:hover{
color: beige;
text-decoration: underline;
}
Grids
Wel doen
Gebruik maken van een grid. Responsive design.
Niet doen
Geen bullitpoints. Niet het scherm vol proppen.
HTML
<ul class="initiatief" >
<li>
<a href="buurtinitiatief.html">
<article class="card">
</article>
</a>
</li>
</ul>
CSS
.initiatief{
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 300px));
width: 100vw;
list-style: none;
}
.initiatief li{
padding: 1.5em;
width: 300px;
align-content: center;
}
Cards
Wel doen
Foto boven aan en daaronder text. Link van de hele kaart.
Niet doen
Niet gefixte positie.
HTML
<article class="card">
<img src="https://dehallen-amsterdam.nl/wp-content/uploads/2021/04/4-mei-herdenking-Adam-Oud-West.jpg" alt="de hallen 4 mei herdenking" target="_blank">
<h3>4 Comité oud-west</h3>
<p>Locatie: de hallen</p>
<p>Datum: 04 mei</p>
<p>Stichting:</p>
</article>
CSS
.card{
margin: 0 2em;
padding: 0 1.5em;
display: flex;
flex-direction: column; /*zorgt ervoor dat de image en tekst onderelkaar komen te staan in de article*/
background: var(--blue);
position: relative;
width: 20vw;
height: 50vh;
min-height: 250px;
}
.card img{
width: 100vw;
height: 20vh;
align-self: center;
min-height: 70px;
max-width: 190px;
}
.card h3{
margin-top: 1em;
}
Links
Alle links moeten een alt hebben. Als je een link hebt die je naar een andere website stuurt, zoals de website van een stichting, zullen die er zo uitzien:
HTML
<a href="#" alt="link naar website">Website naam</a>
CSS
a {
color: var(--blue);
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
Images
Logo
We moeten zelf een logo gaan verzinnen. We mogen namelijk niet het logo van de Hallen gebruiken. Dus voor nu gebruiken wij gewoon de tekt "Buurtinitiatieven".
Icons
Wij maken gebruik van Google Icons. Deze kun je op verschillende manieren importeren en costumizen. Ook kun je ze downloaden als SVG-bestand en op die manier importeren. Dit staat allemaal op de website uitgelegd.
Hier kun je de Google Icons website vindenHier zijn een paar voorbeelden van icons die we gebruiken.
- menu Hamburgermenu
- search Search
- close Close
HTML
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
</head>
Hamburgermenu
<span class="material-symbols-outlined">menu</span>
Search
<span class="material-symbols-outlined">search</span>
Close
<span class="material-symbols-outlined">close</span>
Forms
Contact form
Wij maken gebruik van een form met labels en inputs zodat mensen hun initiatief kunnen aanmelden.
HTML
<form onsubmit="return false" id="contactform">
<label for="firstName"> Voornaam: </label>
<input type="text" placeholder="Voer u naam in" id="firstName" required/>
<label for="initiatief"> Wat is uw initiatief: </label>
<textarea id="initiatiefaanmeld" placeholder="Vermeld uw initiatief. Beschrijf hierbij de tijd/datum en activiteit" rows="6"> </textarea>
<button onclick="sendContact();"> Verstuur initiatief </button>
</form>
CSS
form{
margin: auto;
width: 400px;
}
form label{
border: none;
padding-bottom: 3px;
display: flex;
}
form label:hover{
background: #fff;
pointer-events: none;
}
form input {
border-radius: 5px;
padding-left: 1em;
width: 30vw;
height: 5vh;
}
form textarea{
border-radius: 5px;
padding-left: 1em;
width: 30vw;
height: 25vh;
}
Zoeken
Wij maken gebruik van een form met een input en button om een zoekbar te maken.
HTML
<form class="search">
<input type="search" placeholder="Zoeken...." name="search"/>
<button type="submit"><span class="material-symbols-outlined">search</span></button>
</form>
CSS
form{
margin: auto;
width: 400px;
}
form label{
border: none;
padding-bottom: 3px;
display: flex;
}
form label:hover{
background: #fff;
pointer-events: none;
}
form input {
border-radius: 5px;
padding-left: 15px;
width: 30vw;
height: 5vh;
}
form textarea{
border-radius: 5px;
padding-left: 15px;
width: 30vw;
height: 25vh;
}
.search button{
width: auto;
height: 5vh;
padding: 0.5em;
margin-left: 0.5em;
}
Checkboxes
Voor de filter systeem en forms wordt gebruik gemaakt van verschillende checkboxes om te filteren of iets aan te vinken.
Prijs
Initiatiefnemers
HTML
<label> <input type="checkbox" name="price" value="paid"> betaald </label>
<label> <input type="checkbox" name="price" value="free"> gratis </label>
<label> <input type="checkbox" name="person" value="ask"> vraag </label>
<label> <input type="checkbox" name="person" value="offer"> aanbod </label>
CSS
label {
border: 1px solid var(--grey);
padding: 10px;
margin: 0 10px 10px;
display: block;
white-space: nowrap;
}
label:hover {
background: var(--grey);
cursor: pointer;
}