Skip to content

Latest commit

 

History

History

bulma

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
css
css
 
 
images
images
 
 
index.html
index.html
 
 
readme.md
readme.md
 
 

readme.md

Bulma Hackathon

Bouw een front-end project met een CSS framework!




Wat is Bulma

Bulma is een CSS framework waarin een groot aantal layout oplossingen voor front-end projecten al zijn ingebouwd. In plaats van zelf css classes te schrijven, kan je rechtstreeks bulma classes aan je HTML elementen toevoegen. Een voorbeeld hiervan is <p class="m-4">Hi</p>. Dit is een <p> met een margin van 4. Bulma maakt je layout automatisch responsive, waardoor je niet zelf @media queries hoeft te schrijven. Bulma is vergelijkbaar met TailWind en Material UI.




Programma

Deel Tijd Activiteit
1 Voorbereiding Onderwerp kiezen
2 9:30 ~ 10:00 Introductie Bulma.css
10:00 ~ 12:30 Zelfstandig werken
PAUZE 12:30 ~ 13:00 PAUZE en LUNCH
3 13:00 ~ 14:30 Zelfstandig werken, optioneel speedcourse animatie
14:30 ~ 15:00 Project online zetten op Github Pages
4 15:00 ~ 16:00 Eindmarkt! Plak je link in teams, project open zetten op laptop




Voorbereiding

Kies een van onderstaande drie onderwerpen

  • Bedenk een fictief sportmerk of kledingmerk
  • Bedenk een bandnaam voor een band in jouw favoriete genre
  • Bedenk een product dat je wil gaan verkopen in een shop

Zoek vervolgens op het internet naar drie websites die over dit onderwerp gaan, en die jij erg tof vindt.

Introductie Bulma

  • Volg de introductie over het CSS framework bulma.css

Zelfstandig werken ochtend

  • Bekijk bestaande websites over jouw onderwerp om visuele inspiratie op te doen.
  • Bouw je eigen front-end website met Bulma.CSS, over jouw gekozen onderwerp.
  • Gebruik bulma.css om je layout op te zetten:
    • Gebruik is- en has- om tekstkleuren en achtergrondkleuren te bepalen
    • Gebruik p- en m- om margins en paddings aan te geven.
  • Gebruik minimaal deze bulma componenten:
    • Hero, Section en Footer (paginabreed)
    • Container (gecentreerd op de pagina)
    • Navbar
    • Columns / Column om items responsive naast elkaar te zetten
    • Image
  • Daarnaast kan je voor specifieke doeleinden de volgende componenten gebruiken:
    • Breadcrumb
    • Pagination
    • Dropdown
    • Level
    • Panel, Card, Media Object, Tag
    • Form
    • Zelfgekozen component
  • Gebruik je eigen style.css file om kleuren aan te passen, achtergrondafbeeldingen en animaties toe te voegen, etc.

PAUZE EN LUNCH

Zelfstandig werken middag

  • Workshop: bouw een slideshow animation.
  • Zelfstandig werken om de opdracht af te maken.

AFSLUITING EN PRESENTATIES

Plaats je website online op github pages en paste de link in teams. Op de mini eindmarkt: zet je site open op je laptop.




Startcode

Voeg Bulma en fontAwesome toe aan je index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

Je kan Bulma ook in je CSS importeren in plaats van in de html

@import "https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css";

Je vindt hier een voorbeeld index.html file




Links