[sidenote: Ezt már most látom, hogy az idegen szavak ragozása nagy kihívás lesz. Tudom, hogy sok esetben nem kell kötőjel, de annyira szarul néz ki, hogy most úgy érzésre fogom csinálni, aztán meglátjuk.]
Ha valaha volt ilyen felindulásod kezdőként, hogy "na, most csinálok egy weboldalt", akkor a legtöbb tutorial úgy kezdi, hogy csinálj egy szövegfájlt, majd mentsd el index.html néven. Aztán ha azzal kijátszottad magad, akkor készíts egy másikat style.css névvel, majd linkeld össze a kettőt és kezdődhet a játék, mehet mindkettőbe a megfelelő kód.
A Bootstrap (régebben: Twitter Bootstrap) és HTML5 Boilerplate olyan kezdő csomagok, amik a fenti koncepción alapulnak, de van bennük egy csokornyi kód alapból, ami egyrészt megkönnyíti a munkát, másrészt kurvára összezavarhat elsőre. De nem engedheted meg azt a luxust, hogy elriadj tőlük. Hogy érthetőbb legyen ilyesmiket tartalmaznak:
- CSS reset - ami arra jó, hogy kivédje az összes böngésző hülyeségeit és lenullázza azokat. Például van olyan böngésző (kitaláltad, régebbi IE), ami alapból ronda lila keretet ad a képekhez. Aztán van olyan, ami alapból néhány pixelnyi szünetet hagy az oldal tetején (tehát az oldal lejjebb kezdődik, mint kéne). Ezeket tehát le kell reszetelni, hogy tiszta lappal indulhass. Azt hiszem a normalize.css a nagy kutya a hasonló kezdeményezések között. De végülis nem kell tudnom, mert boilerplétezek, amiben úgyis benne van.
- JS könyvtárak - hivatkozás a menőbb JavaScript könyvtárakhoz, mint például JQuery. Így nem nagy nehézség hívni annak valamelyik szükséges funkcióját
- media queries - ez a mostanában egyre relevánsabb reszponszív dizájnoláshoz kell. Amit egy media query-n belülre írsz, az csak akkor érvényes, ha a feltétel áll. A feltétel pedig valami ilyesmi lesz "ha a képernyő kissebb, mint 600px, akkor...". Tehát ezen belül kell a tabletes és telefonos macerát megoldani. Jó, hogy benne van, mert az egész CSS-ből ez a legcsúnyább és legmegjegyezhetetlenebb pár sor, amit ismerek.
- dizájn elemek - A Bootsrap tartalmaz előre megírt dizájn elemeket is. Például gombok, legördülő menük és input mezők. Ezek letisztultak, módosíthatók, bár olcsó jánoskodásnak számíthat, ha kizárólag ezekre hagyatkozva építeni egy oldalt. Kiinduló pontnak viszont remek. Fejlesztők (értsd: akik a back end-en dolgoznak) azért szeretik, mert össze tudnak dobni könnyen egy webes alkalmazást, majd megjeleníteni viszonylag elegánsan külön erőfeszítések nélkül.
- viewport - megint csak mobil dizájnhoz való elem. Röviden leírva: kivédi, hogy a felhasználónak bele kelljen nagyítani az oldalba. Persze ez is manipulálható minden irányba tetszés szerint.
Az ilyen csomagokat gyűjtőnéven boilerplate-nek nevezzük. Van még százezer, de talán ez a kettő a legnépszerűbb. Vannak olyanok is, amik csak a gridre, azaz az oszlopok elrendezésre és viselkedésére fókuszálnak (pl: 960 Grid), de hasonló megoldás van beépítve a Bootstrap-be is.
Én személy szerint szeretem mindkettőt, de nem kezdenék projectet úgy, hogy kompletten valamelyiket megnyitom és abban megírom az oldalt. Gyakorlásként igen, hogy átlássam, milyen elemeket tartalmaz és hogy kell előhívni néhény csodát belőlük. Viszont a továbbiakban csak sznippeteket csipegetek belőle. Kimásolom belőle a media queriket, a css resetet, a viewport metataget és még néhény olyan dolgot, amire épp szükségem van. Ezzel egyrészt kordában tartom az oldal méretét, másrészt tudom, hogy mi a fasz van. Ugyebár ha Wordpress vagy épp Blog.hu theme-et készítessz, megint csak a csipegetős módszer játszik.
Ha még nem nyúltál ezekhez, szerintem feltétlenül érdemes. Töltsd le kezdésnek a HTML5 boilerplate-et, olvasd át a kommenteket benne, hogy lásd mi mire való. Tanulj belőle. A Bootsrap-nél nagyobb az íve annak, amit úgymond meg kell tanulni róla, mert például a div-ek méretezésének logikáját egy "trükkel" átvarázsolták olyasmivé, amit száraz CSS-től nem várnál. Könnyű használni, csak meg kell érteni, hogy hogyan tették fejlesztőbarátabbá az egészet. Szóval nincs más választás, alázattal végig kell olvasni a weboldalukat és párhozamosan építeni egy tesztoldalacskát.
Kommentben jöhet, ha bármelyik részletről szeretnétek bővebben hallani.
