WV-H7 - CSS-kirjaston käyttöönotto
Tässä harjoituksessa tarkoitus olisi ottaa käyttöön CSS-framework/kirjasto. Tänä vuonna olisi hyvä valita joko Bootstrap tai Bulma, sillä ne ovat yleisesti käytettyjä kirjastoja.
Harjoituksessa voit käyttää pohjana WV-H2 harjoituksen responsiivista toteutusta, tai lähteä toteuttamaan ihan uutta. Tarkoitus olisi lähteä tyylittelemään responsiivista toteutusta käyttäen css-kirjaston vakiotyylimäärittelyjä. Toteutuksesta täytyy löytyä jonkinlainen lomake, esim contact form!
Bootstrap: Tässä harjoituksessa sinulle riittää Bootstrapin linkittäminen suoraan verkosta:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
Sitten vain Boostrapin dokumentaatio auki ja toteuttamaan tyylejä. Sinun tarvitsee lisätä sivuun hiukan sisältöä, että pääset käyttämään kattavasti Bootstrapin eri tyylejä. Hyvä tapa on esimerkiksi tehdä jonkinlainen monipuolinen Contact-formi johon voit lisätä nappuloita ja namiskoita. Myös navigaatio on hyvä tässä!
Bulma: Bulman voi ladata itselleen zip-pakettina suoraan Github-repositoriosta. Nohevampi opiskelija pystyttää NPM-ympäristön itselleen josta asentaa Bulman npm install bulma. Bulman aloitus-dokumentaatio löytyy täältä
Työssä pitäisi olla käytetty css-kirjaston tarjoamia vakiotyylejä ainakin seuraaville elementeille
- Typografia
- Kuvat
- Navigaatio
- Formit
- Buttonit
Kokeile myös muitakin! On hyvä tietää mitä kaikkea css-kirjastoilla voi tehdä ennen varsinaista itsenäistä harjoitustyötä.
Tämän harjoituksen tehtyäsi huomaat kuinka helppo ja nopea on toteuttaa jo visuaalisesti ammattimaisen näköistä jälkeä koskematta kummemmin vielä designiin itse. Mieti tilannetta että Olli Ohjelmoija haluaa tehdä nopeasti ohjelmalleen webbikäyttöliittymän. On paljon parempi että Olli käyttää edes CSS-kirjaston vakiotyylejä, kun että lyö html-elementtejä raakana käyttöliittymään!
Palauta linkki harjoitukseesi tekstitiedostossa Optiman palautuslaatikkoon.