Barion Pixel
Segédlet

Itt a Bootstrap 5 – szebb, gyorsabb, modernebb!

2021. június 03. | Bognár Péter

# # # # # # #

A múlt hónap egyik nagy híre volt a webdesign világában, hogy az internet széles nyilvánossága elé került a Bootstrap 5.0 első stable, azaz véglegesnek tekinthető, használatra kész változata. Ez igen örömteli hír, de lehet, hogy némi magyarázatra szorul. Kezdjük az elején! 

Mi is az a Bootstrap egyáltalán?

A Bootstrap az egyik legnépszerűbb webfejlesztői keretrendszer. Egyszerűbben fogalmazva, egy újrafelhasználható, a frontend fejlesztők igényei és szükségletei számára kifejlesztett kódelemekből álló hatalmas gyűjtemény. A használható kód html, CSS és javascript elemekből áll, és lényegében arra jó, hogy az előre elkészített, megformázott, úgymond kulcsrakész elemek okos felhasználásával a fejlesztők lényegesen kisebb energiabefektetéssel és jóval gyorsabban képesek jól működő, reszponzív, és nem utolsósorban jól kinéző honlapokat építeni, mintha maguknak kellene mindent nulláról felépíteni. 

A félreérések elkerülése érdekében érdemes tisztázni, hogy a Bootstrap nem a modern, grafikus, egérrel cibálós weblapépítő rendszerek közé tartozik, itt a hagyományos módon, kódot pötyögve kell elkészíteni az oldalakat, viszont ha kicsit beletanul az ember, a Bootstrappel sokkalta gyorsabb és egyszerűbb feladat lesz egy kellemes weblap létrehozása. 

A Bootstrap a Twitter boszorkánykonyhájából csorgott elő (először Twitter Blueprint néven) még 2010-ben, Marc Otto és Jacob Thornton programozók munkájaként. Eredetileg az volt a célja, hogy a Twitter belső fejlesztésű oldalainak egységes keretrendszert nyújtson és így konzisztenssé tegye a oldalak működését és megjelenését (addig ugyanis minden részleg maga írta a saját kódját). Mire elkészült az első változat, a fejlesztők rájöttek, hogy ebben az ötletben sokkal több a lehetőség, és egy csapat twitteres kóderrel együtt létrehozták az addigra már Bootstrapnek keresztelt keretrendszer első változatát, ami 2011 augusztusában került a nyilvánosság elé – mégpedig ingyenesen, nyílt forráskóddal. 

A rendszer hatalmas sikert aratott, és ahogyan az a nyílt forráskódú projekteknél már csak lenni szokott, remek, elhivatott közösség épült ki körülötte, akik folyamatosan fejlesztik, hogy mindig megfeleljen a modern idők kihívásainak. 

A Bootstrap legutóbbi, 4-es verziója ugyan “csak” három éve lett véglegesítve (ez a web világában azért elég sok időnek számít), de előtte már majdnem négy éven át tartó munka előzte meg, és eközben a fejlesztői körökben kicsit kopni kezdett kopni a rendszer renoméja: elkezdett unalmassá válni. 

Már csak ezért is nagyon is ideje volt, hogy, ahogy írtuk, 3 alfa- és 3 bétaverzió, valamint rengeteg fejlesztés után hivatalosan is megjelenjen az ötödik változat. De milyen újdonságokkal szolgál?

Új logó

Hát persze, hogy ez a legfontosabb újdonság, de legalábbis a szívünkhöz a legközelebb álló – de nem csak a vizuálisabban gondolkodó webdesignerek vannak így vele, maga Marc Otto, az új verziót bejelentő blogposztjában is ezzel kezdte a vívmányok bemutatását. A korábbi logó sem volt csúnya, de tény, hogy egy lekerekített sarkú négyzetben elhelyezett kezdőbetű nem a legkarakteresebb logó a világon. Az új logó viszont csavar egyet a már ismert designon, és a karakteres lilát és a B betűt megtartva azt egy, a css kód kapcsos zárójeleit idéző alapra helyezi. Reméljük, tetszik, Otto barátunk szemmel láthatóan nagyon büszke rá.

Na de félre a tréfát, lássuk mik a valódi újítások! 

Browser támogatás

A Bootstrap csapata mert nagyot álmodni mondani, és meglépték azt, amit a szíve mélyén már mindenki nagyon szeretne: nyugdíjazták az Internet Explorert. Az IE támogatás a modern web óriásainak agyaglába, amit nagyon sokan máig nem mernek elengedni, attól félve, hogy sok, különösen céges felhasználó, aki máig a tizenvalahány éve beállított rendszercsomagjait használja (pl. bankok, orvosi rendelők), bajba kerül, ha mindenki csak úgy megszünteti az őskövület támogatását – pedig utalnak rá jelek, hogy a Microsoft első böngészője végre elindul a történelem süllyesztője irányába. 

Emellett a Bootstrap 5 más böngészőkkel kapcsolatban is megválogatja, hogy kivel áll szóba, az Edge 16-os, a Firefox 60-as, a Safari 12-es és a Chrome 60-asnál régebbi  verziójával már nem hajlandó mutatkozni. 

Csak a JavaScript

Rengeteg olyan finomság van a Bootstrap eszköztárában, mint pl. dropdown-menük, carousel galériák, amik működtetéséhez a rendszer a négyes verzióig bezárólag a jQueryt hívta segítségül. Ez viszont cserébe komplikáltabbá és nehézkesebbé tette az oldalakat, amit nem feltétlenül szeretett mindenki, ez is volt az egyik vezető érv a Bootstrap ellenében. Az ötös verzió ezen a területen is végzett egy alapos nagytakarítást, és ajtót mutatva a jQuerynek, immár minden, a html és a css képességeit meghaladó feladatra modern, sallangmentes (“vanilla”) JavaScriptet használ. Ezzel a lépéssel nem csak átláthatóbb, de kisebb és gyorsabb is lesz a Bootstrappel készült oldalak kódja, ráadásul az egész rendszer felkészültebben várja a következő évek webes fejleményeit. (Természetesen a Bootstrapben semmi nem tilos, ha szükséged van a jQueryre, továbbra is használható, csak éppen most már nem kötelező).

Továbbfejlesztett rácsszerkezet

A Bootstrap régóta jól használható, nem túl komplikált, de sokoldalú griddel rendelkezik, az új verzió pedig ezen tovább finomított. Megjelent egy új, xxl-es méretegység az 1400 pixelnél szélesebb képernyőkre, változott a gutter értékek kezelése és megjelentek a függőleges térkezelési osztályok is. 

A rács-rendszer általánosságban nagyobb hatáskört kapott az új verzióban – az általános ésszerűsítés jegyében a grid feladata lesz a jövőben az űrlap layoutok kezelése, valamint a kártyákat is a rácsszerkezet használatával kell megoldani – ebbe a csoportba tartozik a card-deck osztály is, a kártyák összerendezése, ami a korábbi változatokban meglehetősen körülményes eljárás volt.   

Még reszponzívabb design

A Bootstrap már nagyon régóta a reszponzív webdesign egyik élharcosa (és már évek óta a másik nagy trendet, a mobile first szemléletet is magáévá tette), ez most tovább folytatódik. Jó példája ennek a folyamatnak, hogy pl. a gutter értékek mértékegysége px helyett most már rem lesz, a fontméretek beállításán pedig még nagyobbat csavartak.

Reszponzív fontméretek

A fontméretek olvasható beállítása – nem csak egy képméretben, hanem úgy, hogy az ember az összes elképzelhető kijelzőméretre gondol (no meg az állított és fektetett képernyőkre is) – nem kis feladat. Az új Bootstrap ezt a klasszikus problémát úgy igyekszik megoldani, hogy alapállpotban bekapcsolja a fejlesztőcsapat mellékprojektjeként kifejlesztett praktikus segédprogramot, a Responsive Font Sizes (RFS) névre hallgató méretállító-motort. A nevével ellentétben az RFS nem csak a betűtípusok, hanem szinte bármilyen méretezési értéket automatikusan be tud állítani a megjelenítés nagyságának függvényében – mindezt fluid, folyamatos módon, figyelve arra, hogy ne lógjon le szöveg a képről, és megmaradjanak az egységek egymáshoz képesti arányai. Eközben persze figyel az olvashatóságra is, hogy nehogy túl apróvá váljanak a betűk.

Fejlettebb űrlapok

Az ötödik változathoz újragondolták az űrlapok (forms) korábban kissé decentralizált kezelését, és minden ide tartozó komponenst és dokumentációk kiemeltek és egy csoportba szedtek. Emellett egy kis vizuális ráncfelvarrást is kaptak az űrlapokban szereplő különböző kapcsolók, amik a korábbiakban csak opcionálisan tértek el a különböző böngészők rendszerkapcsolóitól. Az új kapcsolók már alapból a saját, egységes vizuális stílusukban jelennek meg. 

Új, bővíthető utility-k

A Bootstrap egy nagy csokornyi utility-vel rendelkezik, amik gyorsabbá, egyszerűbbé teszik a kód begépelését. Ezek lényegében előre beállított Sass változók, és az ötös verzióhoz is elkészült illetve módosult néhány. Példaképp: megjelent a rounded-1, rounded-2 és rounded-3 utility a border-radius kis, közepes és nagy méretéhez, a font-size .fs, a font-weight pedig .fw névre egyszerűsűdött. 

Újdonság, hogy az új Utility API -t követve a felhasználók is játszi egyszerűséggel építhetnek saját utilityket a saját designjuk igényeihez igazodva. 

Személyre szabhatóbb

A Bootstrap 5 ígérete szerint a korábbiaknál is egyszerűbb a honlapunk külsejét a saját szükségleteinkhez igazítani, ha nem lennének ínyünkre a beépített, kincstári megoldások. Ennek az egyik eleme a korábbiakhoz képest kiterjedtebb paletta és a részletesebb, átgondoltabb dokumentáció.

Bejön az RTL

No nem az Éjjel-Nappal Budapestre kell gondolni, hanem a right-to-left, azaz jobbról balra olvasott nyelvekre is optimalizált webdesignra. Ez az opció idáig sajnálatosan hiányzott a Bootstrap eszköztárából, ideje volt orvosolni a hiányosságot, hadd legyen a rendszer tényleg mindenkié! (Végül is kb. félmilliárd emberről beszélünk.)

Az RTL bevezetése persze felvet néhány lényegi változást a megszokott kódolási megoldásainkban, hiszen logikus, hogy iránysemlegessé kell tenni a kódban szereplő kifejezéseket, így pl. a margin-left és margin-right helyett margin-start és margin-end kell, hogy a kódba kerüljön. 

Offcanvas

Új komponens az offcanvas elem, amivel pl. a gombnyomásra beugró, rejtett menüket rakhatjuk elég egyszerűen és rugalmasan össze.

Új harmonika

Az új Bootstrap kapott egy vadi új .accordion osztályt is, ami lecseréli a korábbi, kártya-alapú megoldást (és az ígéretek szerint egy csapat bugot is kiküszöböl ezzel). 

Saját ikonkészlet

Kellemes újítás, hogy a Bootstrap legújabb verziója egy teljesen saját ikonkészletet is kapott. A készlet, mint minden más, természetesen szabadon használható – akár nem Bootstrap alapú projektekben is. Az egyszerű, monokróm, körvonalas (vagy kitöltött), univerzálisan használható ikonkészlet jelenleg több, mint 1300 elemből áll, és folyamatosan bővül. Az ikonok igyekeznek minden UI/UX eshetőséget lefedni, és a legtöbb feladatra több, különböző designú megoldást is találhatunk. A Bootstrap ikonjait szabadon lehet SVG, SVG sprite vagy webfont formátumban is felhasználni (de persze le is tölthetjük őket). 

Új példaelemek és javított dokumentáció

Az új Bootstrap egy egész csokornyi példát mutat be a gyakori elemek különböző kombinációs lehetőségeire, egyszerűen copy-paste-olható formában. A snippeteket (kódrészletek) négy kategóriába (Fejléc, Hero, tartalmi elemek, oldalsávok) sorolták be. 

Emellett összeraktak egy új induló sablont is, amivel kevésbé rutinos kóderek is viszonylag egyszerűen fejest ugorhatnak a Bootstrap 5 világába. 

Nem kell megijedni a migrációtól

Ha valaki az oldalát a Bootstrap egy korábbi verziójával építette, nem kell hogy frászt kapjon, először is, a régi verziók nem mennek sehová, továbbra is használhatóak maradnak, ahogy voltak (ami azt illeti, a négyes verzió támogatottsága sem szűnt meg az ötös fejlesztésével, januárban még adtak ki hozzá frissítést (a 4.6-os változatot), sőt most is folyik a munka a 4.6.1-es verzió elkészítésén).  

Ha az illető webdesigner egy régebbi kódját szeretné áthozni a az ötös szép új világába, akkor sem hagyják az út szélén, részletes dokumentáció áll a rendelkezésére, hogy a migráció a lehető legfájdalommentesebb folyamat legyen. A külön figyelmet igénylő változtatásokat (jó sok akad belőlük, hiszen ez a verzió sok mindent alaposan újragondolt) piros Breaking felirattal emelik ki. 

Nincs megállás

A fejlesztő közösség persze nem ül a babérjain, mire ezt a cikket megírtam már megjelent az ötös Bootstrap első kis javítása, az 5.0.1. is. Mindenestre most egy jó ideig csak ennek a főverziónak a csiszolására, tökéletesítésére lehet számítani, amíg be nem fut a valami olyan nagy dolog a webdesignba, amire érdemes lesz megint reagálni. 

Ha eddig kimaradt a Bootstrap az életedből, vagy csak most ismerkedsz a html és a css világával, az új verzió megjelenése remek alkalom, hogy kicsit beleásd magad – vagy éppen újra elővedd, ha korábban már félretetted, mert úgy érezted, hogy eljárt már felette az idő!

Iratkozz fel 7 napos ingyenes, alapozó webdesign kurzusunkra!

Kipróbálom

blog

Segédlet Élethalálharc a WordPressben – a plugin-biznisz

Élethalálharc a WordPressben – a plugin-biznisz

2021. június 16.

A webdesign világának kikerülhetetlen monolitja a WordPress, ez a nyílt forráskódú, idén éppen 18 éves blog-, majd weblapmotor szinte páratlan karriert futott be. Ugyanakkor, valószínűleg éppen azért, mert a nyílt forráskódú, rajongásból és ingyenesen fejlesztett projektek világából ered, és ehhez a világhoz máig is ezer szállal kötődik (lényegében máig belőle építkezik), a WP arányosan sokkal […]

Tovább a cikkre