Grid Layout ja Flexible Box -moduulit CSS-ohjelmistokehyksissä

Abstract

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ä.

Responsive web pages and CSS frameworks have been the web industry’s biggest trend in the 2010s. Their benefits have been significant when it comes to making website development more efficient and enabling new layout possibilities. Existing frameworks have gained some amount of criticism for bloating HTML code and stretching existing CSS techniques beyond their original purpose.

Grid Layout and Flexible Box modules are the HTML and CSS language standardization organization W3C’s proposals for new building techniques and are designed to fix problems in traditional CSS frameworks. Grid Layout enables the use of a two-dimensional grid structure, which helps in building overall page layouts. Flexible Box functions as a traditional one-dimensional grid and it can be used to create different internal components inside a page.

The introduction of these technologies has been slowed down by the lack of browser support. Fortunately, browser support is constantly improving. Flexible Box is already usable in all the major browsers but Grid Layout is still in development. Grid Layout can be enabled separately in the newest versions of the browsers Chrome and Firefox.

This thesis focuses on these new modules as a part of responsive web design and using them in CSS frameworks. The theory part goes through all the features and possibilities of both Grid Layout and Flexible box with the help of examples. The product part consists of developing the best practices for using these new modules and extending these practices into the existing CSS framework of digital agency G-Works.

In this thesis different use cases were defined for both modules, and several different practices and Sass helpers were developed. Found practices and solutions show huge potential and offer an easy way to create different page components and layouts. However, these solutions need to be thoroughly introduced to developers and tested in actual client cases.