„Elus grid“ seminar veebidisaineritele

Minust

‣Anna Jõgi

‣Mekaias töötanud front-end developerina 4 aastat

‣Esimene Drupali projekt 2,5 aastat tagasi

2. Drupal ja ta theme2. Drupal ja ta theme

Drupal

• Ei ole mingi lihtsalt CMS. On framework. Saab lisada mooduleid suure valiku seast

• Drupal on ideaalne vahend agiilse arenduse jaoks

Ajatelg

Drupal

• HTML ei tule arendaja loodud templeitidest vaid selle koostavad Drupal core ja moodulid automaatselt

• Baas theme määrab suurte elementide järjestuse ja nestingu

Ajatelg

Omega theme

• 960 Grid System (3 eri laiust gridi kaasas)

• Responsive. Media querie'd 3 eri gridi laiuse ja fluid mobiili jaoks olemas

• Väga mugav GUI

Kas ilma gridita ei saagi?

Saab.

Aga on töömahukam. Päriselt.

Drupali jaoks disainimine- gridis, palun.

3. Gridi peale 3. Gridi peale joonistaminejoonistamine

Gridi idee

Lehe laius jagatakse reeglipäraselt osadeks, enamasti 12-ks (aga ka 24, 16) tulbaks, milledel on ühesugused vahed.

Iga visuaalne blokk-element lehel saab endale laiuse “column” ühikutes.

Edasi on 12 piires arvutamine: kõrvuti mahuvad 6+6 või 4+4+4 või 3+9 jne.

Ühe saidi raames püsib üks-sama grid, mitte ei ole avalehel 1040 ja sisulehel 1048. Ja sisu alal on tulpasid alati kas 12 või 24 või 16, aga mitte igal lehel ise asi.

CSS mõisted

• Content – elemendi sisuosa, mille piires sisemised elemendid paigutuvad, näiteks tekst laotub

• Padding – omab elemendi taustavärvi, kuid ei luba sisemisi elemente enda peale

• Margin – hoiab külgneva elemendiga vahet, ei oma taustavärvi

column = 60px margin-left = margin-right = 10px

Reeglipärane:

Tehtavad kõrvalekalded:

Väga halb:

Väga halb:

Hea graafiline disainer Drupali projektis:

• Ei riku gridi reegleid ilma veenva põhjuseta

• Teab ja arvestab, millisele baas theme'le disain peale läheb

• Lubab oma ideed kohandada, kui täpne järgimine on ebaotstarbekas