UIkit-kehyksen mukauttaminen Sass-esiprosessorilla

Abstract

Opinnäytetyön tarkoituksena on kuvata UIkit-kehyksen mukauttamista Sass-esiprosessorilla ja arvioida etujen ja haasteiden kautta, millaisiin web-kehitysprojekteihin näiden työkalujen yhdistelmä parhaiten sopii. Työn toimeksiantajana oli Jounin Klapi Oy ja toimeksiantona oli uudistaa toimeksiantajan verkkosivusto ukonloma.fi. Tavoitteena oli UIkit-kirjastoa ja Sass-esiprosessoria hyödyntämällä luoda responsiiviset, helposti ylläpidettävät ja toimeksiantajan toiveita vastaavat personoidut verkkosivut.

Työn aiheen perustana oli tutkimusongelma, jossa haluttiin tehostaa verkkosivuston kehitysprosessia hyödyntämällä kehyksen tarjoamia valmiita ominaisuuksia, kuten responsiivisuutta, mutta samalla luoda sivustolle personoitu ulkonäkö valmiiden tyylien käyttämisen sijaan. Tätä varten käytettäväksi kehykseksi valittiin UIkit, joka sisältää laajan valikoiman erilaisia käyttöliittymäkomponentteja ja mahdollistaa oletustyylien mukauttamisen esiprosessoria käyttämällä. Kehitystyö suoritettiin iteratiivista käyttöliittymäsuunnittelua hyödyntäen, eli käyttöliittymää kehitettiin versio versiolta kohti valmista lopputuotetta testauksen ja toimeksiantajan palautteen perusteella. Opinnäytetyössä kuvataan työn kulkua ja havainnollistetaan esimerkkien avulla keskeisiä kehykseen tehtyjä mukautuksia.

Tuloksena havaittiin, että yhtenäisen visuaalisen ilmeen luominen oli erittäin helppoa globaaleja muuttujia ja mixineitä hyödyntämällä sekä koko sivuston että yksittäisten komponenttien tasolla. Lisäksi esiprosessoria käytettäessä lopullisen CSS-tiedoston kokoa oli mahdollista optimoida niin, että kirjastosta sisällytettiin vain ne komponentit, joita sivustolla käytetään, mikä vähensi CSS-kehyksissä yleisesti ongelmana olevaa ylimääräisten tyyliohjeiden määrää. Toisaalta haasteeksi koettiin UIkitin paikoin suppea dokumentaatio.

Johtopäätöksenä UIkitin ja Sassin yhdistelmän todetaan soveltuvan projekteihin, joissa muutoksia ei tarvitse tehdä kehyksen valmiiseen layoutin ja responsiivisuuden rakentamiseen liittyvään järjestelmään, koska näihin liittyvät mukautukset ovat monimutkaisempia tehdä eivätkä siten palvele alkuperäistä tavoitetta säästää aikaa ja vaivaa kehystä käyttämällä. Kehitystyön lopputuloksena luotiin toimeksiantajan toiveita vastaavat sivut, jotka mukautuvat eri näyttökoille ja joita on jatkossa helppo ylläpitää.