Grid Layout ja Flexible Box -moduulit CSS-ohjelmistokehyksissä
Velling, Tuomas (2016)
Velling, Tuomas
Haaga-Helia ammattikorkeakoulu
2016
All rights reserved
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2016052810550
https://urn.fi/URN:NBN:fi:amk-2016052810550
Tiivistelmä
Responsiiviset verkkosivut ja CSS-ohjelmistokehykset ovat olleet 2010-luvun suurin trendi verkkosivustoilla. Niiden hyöty on ollut merkittävä verkkosivustojen kehityksen tehostamisessa sekä uusien ulkoasuratkaisujen luomisessa. Olemassa olevat ohjelmistokehykset ovat kuitenkin saaneet osakseen kritiikkiä muun muassa koodin paisumisen takia. Ne myös laajentavat vanhojen tekniikoiden käyttöä tarkoituksiin, joihin niitä ei ole alun perin suunniteltu.
Uudet Grid Layout ja Flexible Box -moduulit ovat HTML- ja CSS-kieliä standardoivan W3Corganisaation ehdotukset uusiksi rakennustekniikoiksi, joiden avulla voidaan ratkoa perinteisten ohjelmistokehysten ongelmia. Grid Layout mahdollistaa verkkosivustoilla kaksiulotteisen ruudukkorakenteen, josta on hyötyä erityisesti sivuston rungon toteutuksessa. Flexible Box on perinteisiä ruudukkoja muistuttava yksiulotteinen ruudukkorakenne, jolla voidaan toteuttaa sivuston sisäisiä elementtejä vaivattomasti.
Näiden tekniikoiden käyttöönottoa on hidastanut puutteellinen selaintuki, joka on kuitenkin jatkuvasti parantumassa. Flexible Box on jo käytössä yleisimmissä selaimissa ja Grid Layout voidaan kytkeä päälle kokeilukäyttöön Chrome ja Firefox -selaimissa.
Tässä työssä pureudutaan moduulien soveltumiseen osana responsiivista suunnittelua sekä näiden käyttöä CSS-ohjelmistokehyksissä. Teoriaosuudessa käydään läpi moduulien toiminnallisuudet havainnollistavin esimerkein. Produktiosuudessa haetaan parhaita käytäntöjä moduulien käyttämiseksi CSS-ohjelmistokehyksissä ja käsitellään näiden integroimista asiakasyritys G-Worksin omaan ohjelmistokehykseen.
Työssä löydettiin molemmille moduuleille omat käyttötarkoitukset ja näille luotiin käytännöt sekä Sass-apuvälineet. Löydetyt käytännöt ja ratkaisut ovat hyvin potentiaalisia ja mahdollistavat erilaisten elementtien toteutuksen helposti. Ratkaisut kuitenkin vaativat vielä asiakasyritykseltä työntekijöiden kattavaa kouluttamista sekä käytäntöjen kehittämistä oikeiden asiakasprojektien yhteydessä.
Uudet Grid Layout ja Flexible Box -moduulit ovat HTML- ja CSS-kieliä standardoivan W3Corganisaation ehdotukset uusiksi rakennustekniikoiksi, joiden avulla voidaan ratkoa perinteisten ohjelmistokehysten ongelmia. Grid Layout mahdollistaa verkkosivustoilla kaksiulotteisen ruudukkorakenteen, josta on hyötyä erityisesti sivuston rungon toteutuksessa. Flexible Box on perinteisiä ruudukkoja muistuttava yksiulotteinen ruudukkorakenne, jolla voidaan toteuttaa sivuston sisäisiä elementtejä vaivattomasti.
Näiden tekniikoiden käyttöönottoa on hidastanut puutteellinen selaintuki, joka on kuitenkin jatkuvasti parantumassa. Flexible Box on jo käytössä yleisimmissä selaimissa ja Grid Layout voidaan kytkeä päälle kokeilukäyttöön Chrome ja Firefox -selaimissa.
Tässä työssä pureudutaan moduulien soveltumiseen osana responsiivista suunnittelua sekä näiden käyttöä CSS-ohjelmistokehyksissä. Teoriaosuudessa käydään läpi moduulien toiminnallisuudet havainnollistavin esimerkein. Produktiosuudessa haetaan parhaita käytäntöjä moduulien käyttämiseksi CSS-ohjelmistokehyksissä ja käsitellään näiden integroimista asiakasyritys G-Worksin omaan ohjelmistokehykseen.
Työssä löydettiin molemmille moduuleille omat käyttötarkoitukset ja näille luotiin käytännöt sekä Sass-apuvälineet. Löydetyt käytännöt ja ratkaisut ovat hyvin potentiaalisia ja mahdollistavat erilaisten elementtien toteutuksen helposti. Ratkaisut kuitenkin vaativat vielä asiakasyritykseltä työntekijöiden kattavaa kouluttamista sekä käytäntöjen kehittämistä oikeiden asiakasprojektien yhteydessä.