CSS ietvari (frameworks) un to pielietošana web dizainā

CSS ietvari (CSS frameworks) ir kļuvuši vēl populārāki pēdējā laikā, kad uz dažādām ierīcēm (mobilie telefoni, planšetdatori, netbooki, datora) un dažāda satura interneta vietnēs (mājas lapas, facebook, blogi) interneta saturs tiek atainots dažādi. Pats esmu vairākos projektos lietojis tikai divus:  960.gs jeb 960 Grid System, kuru pēdējā laikā aizstāju jau ar mazāka izmēra 1KB CSS Grid. Tālāk pastāstīšu par katru no šiem CSS ietvariem, ko parasti lieto interneta mājas lapās vai blogos.

Vakar ar @klavina “aizrunājāmies” par CSS ietvaru lietošanu, tā vai citādi, bet 140 zīmēs nav runāšana.

Ievadam

Jāsāk laikam jau ar to, ka pats sevi par web dizaineri neuzskatu, tādēļ man ir jāmeklē citi risinājumi satura vizualizācijai. Jāsaka, ka es CSS ietvarus uztveru kā palīgus programmētājam, gadījumos, kad ātri nepieciešams dizains vai slinkums meklēt kādu paraugu internetā. Ietvari nav izmantojami gadījumos, ka klients atnāk jau ar gatavu dizainu, kad dizains ir jāsagriež tā kā “uzzīmēts”.

Salīdzinājumam: Lai izceptu piparkūkas (mājas lapu), mīklu (“dizains”) var nopirkt veikalā un mājas tikai veidot figūriņas un izcept, ja pašam nav laika vai prasmes uztaisīt mīklu. Toties vislabāk, protams, būtu veidot mīklu pašam – ar dažādām variācijām un garšām.

Par ietvariem

Ir vēl vērts pieminēt tādus ietvarus kā Yahoo YUI Grids CSS, kurš noder sarežģītākiem izklājumiem un Blueprint CSS Framework, kuru tā arī nesāku lietot.

960 Grid System

960 css grid system

Pēc tam, kad centos saprast jau iepriekšminētos Blueprint CSS Framework un Yahoo YUI Grids CSS, sāku pētīt un pielietot 960 Grid System, kurš pirms apmēram diviem gadiem likās labāks dažādām mājas lapām, kurām nav sava dizaina un nepieciešams vienkāršs satura izklājums.

Kas man patīk 960 Grid System ietvarā:

  1. ir jau sagatavots, lai vienādi rādītos visos pārlūkos (CSS reset – reset.css),
  2. ir jau gatavi teksta atainošanas pamati un minimāls noformējums (skatīt text.css),
  3. ir daudz dažādu paraugu internetā, kurus var izmantot iedvesmai vai veidot no pašiem paraugiem,
  4. gatavs lietošanai.

960 grid system mīnusi:

  1. pārāk daudz css klases,
  2. gadās “aizmirst” citreiz visus alpha un omega, prefix_, pull_ ,…

Šobrīd 960.gs tiek izmantots arī šim blogam

1KB CSS Grid

1kb css grid

1KB CSS Grid man iepatikās dēļ tā vienkāršības un izmēra. Ir tikai pats minimums, kas nepieciešams:

1KB CSS Grid plusi:

  1. nav sarežģītu css klašu,
  2. vienkāršs,
  3. vairāk pielāgojams,
  4. sastāv tikai no divām klasēm: column un row,
  5. ļoti mazs izmērs, kā jau minēts pašā nosaukumā.

mīnusi:

īsti nezinu, ko lai min pie mīnusiem, ja pats ietvars ir pamatos domāts tikai kā sākuma izejmateriāls mājas lapai

  1. varētu minēt nullēšanas trūkums (CSS reset).

Šo vienīgo mīnusu var mierīgi aizstāt ar jau iepriekšējā 960.gs esošo reset.css vai izmantot jau kādu no modernākajiem HTML5 reset variantiem.

Šobrīd tiek izmantots MediaBox.lv “klientu apkalpošanas centrā” https://team.house/; Nu jau Twitter Bootstrap.

Noslēgumam

Šeit pieminēju tikai dažus CSS ietvarus dizaina veidošanai. Kā jau minēju ievadā, tad ietvari tagad jau ir daudzām iekdienā lietotām ierīcēm. Par mobilā tālruņa un Facebook dizaina ietvariem citreiz, kad būs pabeigts kāds darbs.

Jau 4 atsauksmes par CSS ietvari (frameworks) un to pielietošana web dizainā

Marcus

#298

Iemetu aci tajā YUI, tas manā skatījumā vairāk jaunajiem, kas nav paguvuši apgūt css, jo viss ko YUI dod ir pre-definētas klases, kas savukārt pieredzējušiem dizaineriem vairāk vai mazāk pašiem ir savos paraugos. Turklāt paies laiks, līdz iefiksēsi galvā definējumus, no jauna, pieņemot, ka veido lapas ar saviem vienādiem definējumu nosaukumiem, kad tā vietā ātrāk būtu uzcept to vienu definējumu, kā vērt vaļā readme failus, kad definējumi piemirstas. Uzskatu arī, ka šie pre-definējumi ierobežo un ja tiks pie popularitātes dizaineru vidū, veidos prototipu mājaslapas. Nākotne ir par inovāciju un uzskatu, ka šādi definējumi šauj pār strīpu, bet nu katram savs.

Rolands Umbrovskis

#299

Laikam jāpiebilst, ka dizaineriem CSS ietvari nepatīk tieši dēļ tā, ka ierobežo izmēri :)

deni2s

#300

Roland, pārlasi vēlreiz uzmanīgi šo teikumu: Sveicināti jaunajā MediaBox.lv klientu apaklpošanas mājas lapā!

Un priecīgus! ;)

Rolands Umbrovskis

#301

oi, paldies! Laboju!
Arī priecīgus

Izsakies arī Tu