Bouwen - koeenm/the-startup-responsive-interactieve-website GitHub Wiki
Inleiding
Ik zet mijn ontwerp om in een echte website.
Basis
Ik start deze website met mobile first bouwen. Tijdens het werken heb ik mijn scherm als mobiel staan, zodat ik telkens kan zien hoe de site er uit ziet op mobiel. Later ga ik verder met de breakpoints zodat de website ook goed te gebruiken is op grotere schermen zoals tablets, iPads en laptops.
Ik heb verschillende kleuren overgenomen van de al bestaande site van de BNR, deze stonden ook gedeeltelijk in de styleguide die we hebben meegekregen:
Een aantal van deze kleuren gebruik ik als custom properties, zodat ze voor mij altijd makkelijk terug te vinden zijn, en mocht ik of iemand anders besluiten dat een kleur veranderd moet worden kan je dat heel makkelijk op 1 plek doen, in plaats van dat je dat bij elke propertie in het hele bestand dat los moet doen:
:root {
--primarycoloryellow: rgb(255, 210, 0);
--primarycolorblack: rgb(31,31,31);
--primarycolorwarmgray: rgb(215, 210, 203);
--backgroundcolorlight: rgb(245,245,245);
--mainfont: "FSLucas regular", sans-serif;
--mainfontsemibold: "FSLucas semi bold", sans-serif;
--mainfontbold: "FSLucas extra bold", sans-serif;
--mobiletextpadding: 0 0.5em;
}
Ook is er in deze root de font-family te vinden, die ook nog eens verschild in dikte van de letter.
Dit is goed om duidelijk te maken dat deze site onderdeel is van de Business Nieuws Radio. Ook gebruikt de BNR heel veel slices zoals deze:
Deze ga ik later bij het 'enhancen' van mijn site proberen te implementeren, omdat ik het een mooie toevoeging vind en het past bij de identiteit van de website.
Structuur
Ik deel mijn site onder in verschillende sections. Deze bestaan uit de verschillende kopjes zoals, Programma's en podcasts, gemist of de live radio. Maar ook de navigatie bijvoorbeeld.
Op deze foto heb ik met kleur aangegeven waar de sections beginnen en eindigen.
Ik heb deze sections allemaal aparte classes gegeven, maar de algemene elementen heb ik buiten de nesting van de bijbehorende section al gestyled:
Algemene styling:
body {
background-color: var(--backgroundcolorlight);
overflow-x: hidden;
}
h1 {
font-family: var(--mainfontsemibold);
font-size: 2.5em;
}
h2 {
font-family: var(--mainfontsemibold);
font-size: 2em;
}
h3 {
font-family: var(--mainfont);
font-size: 1.5em;
}
p {
font-family: var(--mainfont);
max-width: 30em;
}
ul {
list-style: none;
padding: 0;
}
Voorbeeld van geneste styling van een section: dit is het programma's en podcasts deel, waarbij je opzij kan swipen om zo andere programma's te vinden.
section.programs {
font-family: var(--mainfont);
padding: var(--mobiletextpadding);
& ul {
display: flex;
flex-direction: row;
overflow-x: auto;
list-style: none;
justify-content: start;
padding: 1.5em 0;
padding-left: 1em;
gap: 1em;
}
li {
& img {
max-width: 47.5vw;
}
}
}
Carrousel / swipe
Ik mocht van Koop eerst geen swipe functie maken bij onder andere de programma's. Omdat dit te veel tijd in beslag zou nemen, en ik eerst moest focussen op de content. In eerst instantie heb ik daar naar geluisterd en had ik dit allemaal netjes onder elkaar gezet. Zo lijkt het ook alsof er meer content op de site staat. Maar ik heb er niet naar geluisterd omdat ik een soort carrousel veel leuker vond en ik had bedacht dat het niet zo heel veel tijd zou kosten. En het kostte ook niet zo lang.
Ik bedacht eerst om de op de body de overflow-x op hidden te zetten. Dit zorgt er voor dat je niet horizontaal kan swipen:
body {
background-color: var(--backgroundcolorlight);
overflow-x: hidden;
}
Hierna heb ik op de ul van de section podcasts en programma's de overflow-x op hidden gezet en heb ik flex-wrap: wrap uitgezet. De flexwrap zorgde er eerst voor dat er 2 programma's naast elkaar richting beneden werden getoond.
ul {
display: flex;
flex-direction: row;
overflow-x: auto;
list-style: none;
justify-content: start;
padding: 1.5em 0;
padding-left: 1em;
gap: 1em;
}
Hier is het voor en na te zien:
Responsive design
Op telefoon is er een 1 koloms design. Alles is onder elkaar. Maar wanneer er de ruimte voor is, wil ik dit anders indelen. Mijn plan is om dan de uitgelichte programma's rechts verticaal te tonen en daarbij nog een extra promo voor de app. Door middel van bijvoorbeeld een QR code. Ik ben van plan dit te gaan doen met grid.
Breakpoints
Interactie
We moesten voor een opdracht ook een interactie toevoegen. Ik wil dat je op het hamburger icoontje kan klikken, waarna het menu zich opent.
Dit heb ik gemaakt door middel van het 3-stappenplan in javascript, en de margin-top van het menu veranderd. De 'Zero-state' is wanneer het menu niet in beeld is. Wanneer je op de hamburger icon klikt zal de margin van het menu veranderen met een transitie.
Dit is de zero state
.burger-menu-dropdown {
margin-top: -15em;
transition: margin-top 0.3s;
En dit krijg je wanneer je op de hamburger hebt geklikt
.burger-menu-dropdown.active {
margin-top: 0;
}