Blueprint CSS -kehys avustaa sivuston taiteilussa

Kaikkea ei aina kannata keksiä uudestaan, eikä se ole aina edes tarpeellista, sillä hyviä ideoita voi kierrättää. Web-sivujen suunnittelussa taustalla olevat rakenteet ja elementit ovat usein eri projekteissa pohjimmiltaan samanlaisia ja mahdollisuuksia uusiokäytölle on useita. Internetistä löytyykin useita kirjastoja ja frameworkkeja JavaScriptille, web-ohjelmointiin ja viime aikoina enenemissä määrin myös CSS:lle. Yksi kohtalaisen kätevä ja selkeä CSS-framework on Blueprint CSS -framework.

Blueprint CSS on norjalaisen opiskelijan, Olav Frihagen Bjørkøy:n luoma CSS-framework, joka käytännössä kokoaa yhteen useita hyväksi havaittuja tekniikoita ja tarjoaa hyvän perustan web-sivun rakentamiselle. Kehyksen kokonaisuus rakentuu ristikkotaiton päälle (Grid Layout) ja tarjoaa järkevät perusarvot typografialle ja eri CSS-elementeille. Vakiona sivuston sisältö on suunniteltu 960px leveäksi eli 1024×768 -resoluutiolle. Blueprint CSS:n tarjoamia ominaisuuksia voi laajentaa muun muassa hienommilla napeilla. Jos Blueprint CSS:n taustat kiinnostavat, kannattaa lukaista Olavin haastattelu.

“Spend your time innovating, not replicating.” – Blueprint CSS

Parhaiten Blueprint CSS:n idea selvenee esimerkeistä:

Blueprint CSS Blueprint CSS Blueprint CSS Blueprint CSS

Blueprint CSS:llä saa aikaan nopeasti sekä näkyvää että siistiä tulosta ja varsinkin hieman vähemmän CSS:n kanssa taistelleille web-koodareille se on hyvä lähtökohta. Vastaavasti hieman kokeneemmille toteuttajille Blueprint CSS:n käyttäminen voi tuntua hieman rajoittavalta ja jäykältä, vaikka monilta osin se tarjoaakin käteviä palikoita nopeaan toteutukseen. Tältäkin osin Blueprint CSS -framework toteuttaa monen muun frameworkin tavoin yhden niiden käytön ongelman: olet “rajoittunut” valitsemasi kehyksen sisään ja sieltä irtautuminen voi olla työlästä.

Kokeilin Blueprint CSS:n kätevyyttä muutaman web-projektin suunnittelussa ja etenkin sen sopivuutta omiin tarpeisiini, mutta vaikka kehys vaikuttikin näppärältä, ei se oikein taipunut haluamiini raameihin. Pala palalta kaipasin jotain hieman erilaista, jota Blueprint CSS ei tarjonnut, ja lopulta totesin helpommaksi vain poimia käyttöön ne osat, jotka havaitsin käytännölliseksi. Eli käytännössä olen osa osalta rakentamassa omaa CSS-kehystä, joka toki hiemankin enemmän web-sivujen suunnittelua tekeviltä jo jossain muodossa löytyy. Työläin vaihehan vain on kaikkien palikoiden kerääminen yhteen ja sen jalostaminen sopivaksi kokonaisuudeksi.

Vaikka Blueprint CSS ei oikein lämmittänyt, sen kanssa leikkiessä tuli kuitenkin todettua, että ristikkotaitto eli Grid Layout on aika kätevä tapa sijoitella komponentit ruudulle. Kehitysvaiheessa ristikkotaiton ja elementtien sijoittelun apuna on lisäksi kätevä käyttää Grid Layout JS -palikkaa, joka JavaScriptin avulla näyttää ja piilottaa sivutaiton sarakkeet.

Kenties seuraavaksi pitää tutkia, mitä tarjottavaa BlueTripillä on ja mitä kaikkia komponentteja Yahoo User Interface Librarysta löytyy. Open Sourcessa on se mainio ominaisuus, että jos jokin asia ei miellytä, lisäyksen saa kohtalaisen helposti toteutettua ja aina voi tietenkin forkata.

Aiheeseen liittyvät kirjoitukset

Artikkeli on julkaistu sunnuntaina 16. marraskuuta 2008 kello 12.45. Kategoria(t): koodaus. Avainsanat(t): , . Kirjoittaja: Marko. Lisää kestolinkki kirjanmerkkeihisi.

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *