A Bootstrap egyszerű és hatékony módosítása
A Bootstrap nem az egyetlen létező HTML/CSS keretrendszer, de bátran kijelenthető, hogy nagymértékben hatást gyakorolt az online megoldásokra. A Bootstrap keretrendszer jelentősen segítette sok alkalmazás és weboldal tervezését és fejlődését, illetve népszerűbbé tette a masszív HTML keretrendszerek használatát.
Sajnos a keretrendszer tulajdonságai épp az emberi lustaságot szolgálják ki, így a legtöbben csupán az alapértelmezett dolgok végrehajtására használják. Ennek ellenére kijelenthető, hogy az alapértelmezett stílusok és rácsszerkezetek sem rosszak, noha az igényes továbbfejlesztés alapjaiként kellene gondolnunk rájuk. A Twitter csapatának kemény munkája és sok-sok tesztelése kellett a minőségi végeredményhez. Így született meg az a stabil alap, amire építeni lehet.
Ez mind csupán egy alap. A keretrendszer – ahogyan a neve is sugallja – csupán keretet és alapot biztosít a további munkához, tehát nem kizárólagos és végleges megoldásnak szánták. Egy keretrendszer mindig megköveteli, hogy igényes UX felület társuljon hozzá. Kivételről csak akkor beszélhetünk, ha belső alkalmazásra szánt eszközt építünk a segítségével, amit a célközönségünk soha nem fog látni. De még akkor is...
A keretrendszer arról szól, hogy a jó ötleteket előrevigyük, fejlesszük és olyan dolgokat hozzunk létre a segítségükkel, ami jó és hasznos. A Bootstrap keretrendszer fejlesztői remek munkát végeztek, ugyanis megkönnyítették mindezt. A kód moduláris, a keretrendszer egyéni komponensei letölthetők és igény szerint használhatók. Ráadásul biztosítanak egy olyan eszközt, amely segítségével testre szabhatóvá válik az alap keretrendszer, így a kiindulási pont igény szerint módosítható.
Innentől kezdve viszont minden rajtunk múlik. Elismert tervezők és fejlesztők olyan alap eszközöket készítettek, amelyek további fejlesztési lehetőséget biztosítanak számunkra. Nincs értelme az alapértelmezett megoldásoknál maradni.
Vegyük számba a saját projektjeinket és igényeinket. Talán a Bootstrap alapméretezett tipográfiája megfelelő számunkra, viszont a színskála és a rácsok elhelyezkedése nem, esetleg más ikonokra van szükségünk. Meg kell határoznunk azokat a pontokat, ahol elégedetlenek vagyunk az eredménnyel és ahol más igényeket támasztunk a munkánk iránt.
Bootstrap modulok
Teljes értékű modulokról van szó, amelyek használata sokszor specifikus és korlátozott, ám amennyiben megfelelnek az igényeinknek, akkor igen hasznosak lehetnek.
Flat UI
A listán szereplő első modul a Designmodo által fejlesztett alapvető Flat UI (user interface) modul. Igen rövid idő alatt nagy népszerűségre tett szert egyetlen ok miatt: mert gyönyörű.
A modul azok számára lett fejlesztve, akik előnyben részesítik a flat tervezést; minden UI elem újra lett tervezve vadonatúj esztétikai szempontok alapján.
A Flat UI arra ösztönöz bennünket, hogy újragondoljuk a Bootstrap kinézetét; mindezt új vektoros ikonokkal, új glyph icon betűtípusokkal, egyéb UI elemekkel és könnyű színváltási lehetőségekkel.
Bosszantó lehet, hogy az alapértelmezett betűnagyság túl kicsi a kényelmes olvashatósághoz. Egyes esetekben ez lehet elfogadható, de a legtöbb esetben erre a módosításra is sort kell kerítenünk.
A Flat UI ingyenes, de a fizetős pro verzió is igénybe vehető, amihez extra elemek, funkciók és PSD fájlok tartoznak.
Fbootstrapp
Korábban azt mondtuk, hogy ezek az eszközök inkább specifikus használatra készültek. Nos, nem vicc volt. A Fbootstrapp teljesen át lett alakítva annak érdekében, hogy kompatibilis legyen a Facebook használói felület elemeivel.
Mire jó ez a gyakorlatban? A Fbootstrapp egy olyan eszköz, amely a Facebook iFrame alkalmazásainak gyors fejlesztésére lett megtervezve minden releváns méretben. Ez magába foglalja a tipográfia, a formok, a nyomógombok, a táblázatok, a rácsszerkezetek és navigációs elemek HTML és CSS tulajdonságait.
A Facebook alkalmazás fejlesztőinek köszönhetően a munkánk könnyebbé vált.
Jumpstart UI admin sablon
A Bootstrap elsősorban arra lett kifejlesztve, hogy különböző alkalmazásokat szolgáljon ki, de egy kicsit több munkára van szükség, ha egy klasszikus „admin felületet” szeretnénk létrehozni. A Jumpstart UI három különböző sablont ajánl számunkra, amelyek csodálatosan elvégzik ezt.
Az admin UI ikonok, a widget stílusok, a jQuery-alapú adatok mind a testre szabható reszponzív megjelenés érdekében készültek.
Ezek az eszközök viszont nem ingyenesek, 15-20 dollárt kell fizetnünk értük egyenként. Amennyiben kielégítik a specifikus szükségleteket, akkor abban az esetben érdemes megvenni őket.
BootMetro
Sokan szeretik, mások pedig szenvedéllyel utálják, de nem tagadható, hogy a Windows 8 és a Metro UI felkavarta a tervezői világot.
A BootMetro ingyenes, kiforrott fejlesztésnek tűnik, ezért érdemes alaposabban megismerni. Talán nem használható a legtöbb cél megvalósítására, de mindenképpen érdekes tapasztalatot biztosít.
Bootstrap testreszabási eszközök
Hol is kezdjük, ha szeretnénk a Bootstrap beállításait még inkább testre szabni a különböző UI/UX szükségletek és elvárások figyelembevétele mellett? Nos, rögtön az elején, a kódnál kell kezdenünk. Ez néha nem egyszerű.
Ha meg szeretnénk változtatni a tipográfiát, a gombokat, a hivatkozások színeit vagy a navigációs elemek stílusát, az relatív könnyen fog menni. Minden változtatható, de semmilyen vizuális segítség nem áll rendelkezésre, tudni kell a színek HEX kódjait és más ismeretekkel is rendelkezni kell. A Bootstrap ehhez nem kínál közvetlen segítséget.
Szerencsére léteznek Boostrap téma készítők, amelyek pont ezt a célt szolgálják. A következőkben sorra veszünk néhányat a legjobbak közül.
StyleBootstrap
Akit nem zavar az otromba felület, annak a StyleBootstrap hatékony eszközként szolgál az alapméretezett UI elemek szerkesztésében. Ha egyszerűség a fő szempont, akkor ez egy tökéletes eszköz a gyors használathoz.
Bootstrap Magic
A Bootstrap Magic tökéletes választás abban az esetben, ha a keretrendszert alapjaiban és mélyre hatóan szeretnénk megváltoztatni. A Bootstrap Magic szebb és egyszerűbb felülettel rendelkezik, illetve lehetőséget kínál a legtöbb elem módosítására. Használata némileg bonyolultabb, ezért több időt vehet igénybe, azonnal sokkal gyorsabb, mintha saját magunk készítenénk a teljes egyedi kódot.
Add-on és snippet
Vannak olyan dolgok, amelyekkel a Bootstrap alapértelmezetten nem rendelkezik, mégis szükségesek és hasznosak. Ezek a bővítmények sokszor nagy segítségünkre vannak.
Font Awesome
A Bootstrap glyph ikonok igazán hasznosak, viszont korlátozottak. Használhatók sötét és világos ikonok, amelyek szépen rendszerezve vannak. Amit megtehetünk egy szöveggel a CSS3 segítségével, azt megtehetjük az ikon fontokkal is. Változtathatjuk a méretüket, színüket, árnyékolást adhatunk hozzájuk... Érdemes megismerkedni a Font Awesome eszközzel, ugyanis 361 ikon válik elérhetővé a segítségével, amelyek rugalmasan és kreatívan alkalmazhatók.
Bootsnipp
A Bootsnipp egy HTML snippet könyvtár, amelyet a Bootstrap-pal párhuzamos alkalmazásra terveztek, mégpedig oly módon, hogy egyetlen további felesleges könyvtárat sem kelljen külön létrehozni. A snippet-ek magukba foglalják a fülek alatt működő login és sign-up formokat, jobb naptárakat, a Gmail-hez hasonló e-mail felületeket, UI média lejátszókat...
A Bootsnipp egy hatékony eszköz, ha gyors és hatékony munkára van szükség.
Leírásaink azon kezdő és haladó programozóknak nyújtanak segítséget, akik már minimális szinten foglalkoztak weboldalkészítéssel. Ha szeretnél jobban elmélyülni a témában, vagy elsajátítani alapokat, még tovább fejlődni, akkor nézz körbe tanfolyam kínálatunkban, ahol a kezdőtől a profi szintig nyújtunk képzéseket a számodra.