L

A Bootstrap használata - 1. rész

Az előző elképzelésem szerint az eredeti Bootstrap leírást - kicsit kibővítve - szerettem volna feltölteni az oldalra bejegyzésenként. Sokat törtem rajta a fejem, hogy ez jó megoldás-e.

Nem szeretnék csak szimpla magyarosításokat gyártani, ettől kicsit többet akartam kihozni a sorozatból. Így én más szemszögből közelítettem meg a dolgot. Megkértem egy régi barátomat, aki természetesen szeretné elsajátítani a Bootstrap használatát, hogy tegye fel a kérdéseit, ami jelen pillanatban, mint kezdő foglalkoztatja. A bejegyzést a lehető legalapabbra terveztem, szóval ha haladó vagy a témában, nem sok újat fogok mondani.

Bootstrap használata - Alapok

Elég kevés leírás található magyar nyelven a Bootstrap használatáról, így most úgy döntöttem, hogy részben a Bootstrap hivatalos leírásából, részben saját tapasztalatokból, elkezdek egy Bootstrap sorozatot.

Ez nem lesz túlságosan élménygazdag azoknak, akik már ismerik, sőt... Nekik kifejezetten semmit sem fog mondani. De a kezdőknek, és kevésbé angolos "bajtársaknak" remélem, sokat segít.

Egyperces: CSS - object-fit

Elég sokat gondolkodtam rajta, hogy mikor mondjuk csinálok egy képgalériát, vagy csak simán egy webshop termék oldalát, meg tudom-e oldani valahogy, hogy a programnak ne kelljen 1000 különböző képet létrehoznia.

Volt egy oldal, ahol a grafikai tervek miatt 16 különböző méretarányú képet kellett használni. Tehát írtam egy php scriptet, ami mindig legenerálja - ha nem létezik - a megfelelő méretű képet. Ezzel eddig nincs is gond, mert a képek a méretezés miatt csak néhány KB helyet foglalnak, de azért sok kicsi sokra megy.

Most találtam rá nemrég a CSS egyik szolgáltatására az object-fitre.

Egyperces: CSS mértékegységek

Már írtam hosszabban néhány relatív mértékegységről, mint például a vh és vw használatáról vagy a rem-ről.

Sokan bele sem gondolunk szerintem, hogy hány különböző méretezési lehetőség van a CSS-ben. Én is a napokban futottam bele egy érdekes oldalba, ahol összeszedték és vizuálisan ábrázolták is mindegyiket.

A CSS Ruler névre keresztelt oldalon megtaláljuk ábrázolva az összes relatív, abszolút és látótérhez százalékos mértékben számolt értékeket és akár játszhatunk is vele:

Bootstrap vs. Foundation

A Bootstrap és a Foundation talán mondhatjuk, hogy a legelterjedtebb CSS-keretrendszerek a weben. Személy szerint eddig a Bootstrapet támogattam, mivel már a 2.3.2 idején, vagy még lehet előtte, megismerkedtünk. Aztán, mikor kijött a 3-as, első körben baromira nem jött be. Még a Google+ fiókoman is hangot adtam ennek, pedig ritkán szoktam bármit is posztolni.

Persze, csak a már megszokott 2.3.2 miatti kirohanás része volt. Egyszerűen nem láttam át az új gridet. De még utána max 1-2 oldal készült 2-ben. Szépen lassan megszoktam a 3-at, sőt...

Tehát, elkezdtem tanulmányozgatni a 3-as Bootstrapet, de valahogy mindig kevésnek bizonyult. Akárhogy designolod, mindig megvan az a tipikus, 1-2 kattintás után érezhető Bootstrap-feeling. Elkezdtem vadászni a neten és ekkor találtam rá a Foundation-re. A ZURB által készített keretrendszer első ránézésre kicsit többet adott, mint a konkurencia. Tehát akkor kicsit összefoglalom, hogy melyik rendszer pontosan mit ad hozzá az élményhez. Persze, mint mindennek ezeknek is megvan a saját előnye és hátránya. Egyik rendszerhez sem húzok igazán, így talán reálisabb képet tudok felállítani.

Mit takar a "vh" és a "vw"?

Mint azt az előző bejegyzésemben is bemutattam van néhány újabb mértékegységünk, amit használhatunk a sitebuild során.

Az eddig ismert méretezési egységeink:

  • px
  • em
  • pt
  • rem
  • %

Amit pedig most fogunk kicsit körbejárni:

  • vh
  • vw

Jah és ne hagyjuk ki őket sem:

Font méretezés "rem"-mel

Elég heves viták folynak napjainkban is a megfelelő fontméret egységek kiválasztásában. Sajnos rengeteg előnye és hátránya is van a különböző technikáknak és nem ez az egyetlen felmerülő kérdés velük kapcsolatban.

Két fő technikát használunk/használtunk a CSS3 megjelenéséig.

  • Font méretezés pixelben
  • Font méretezés em-mel

Mielőtt bármibe belekezdenénk vegyük sorra, mik a rég bevált módszerek.

Tejüveg (frosted glass) effekt SVG-vel

A napokban elég sokat olvastam a különböző css effektekről. Sokszor van, hogy a grafikus speciális effekteket pakol egy-egy képre és ezeket meg kellene próbálni a lehető legélethűbb módon visszaadni. Ilyen effekt a mai tejüveg effekt vagy angolul a frosted glass effect.

GIMP alatt készítettem egy mintát, hogy körülbelül milyennek kellene lennie a a végső képünknek.

Nekünk innen az 5 pixelnyi külső keret fog kelleni. Ez is egy olyan effekt, amit legtöbbször a kép túlvágásával érünk el, így ha módosul a háttér, változtatunk a környezeten, akkor a képet ismét körbe kell vágni, és ráadásul pngben kell elmentenünk, ami az átlátszóság miatt jóval nagyobb méretű lesz.

Tehát, most el kell dönteni, hogy mit használunk. Első körben teljesen CSS alapokon akartam megcsinálni blur filterrel és CSS maskkal, de a böngésző támogatottságunk még mindig nem teljes. Canvast is használhatnánk, de ahhoz javascript szükséges. Így marad az SVG, aminek a böngésző támogatottsága is jó.

Leoamros

X

Üdv! Ha még személyesen nem ismerjük egymást, Smajda László vagyok, de szólíts csak egyszerűen Laccának vagy Leoamrosnak. Olyan netbúvároknak osztom az észt, akik szárnyaikat próbálgatják a PHP, MySQL, JavaScript világában, és elakadnak valamelyik folyamat során. Főleg a saját tapasztalatokat írom le, ettől függetlenül kérdezhetsz bátran, lehetőségeimhez mérten válaszolok.

Kategóriák
Címkék
Social Media
Eszközök