Mindig nagy segítség ha valami megkönnyiti a webes munkát, nem utolsó sorban ha hasznos szemléletmódot is elsajátíthatunk általa. Ezért kell ismerni olyan keretrendszereket mint például a Bootsrap.
A Bootstrap egy HTML keretrendszer azaz egy előre elkészített eszköztár ami rendkívül felgyorsíthatja a tanulást, fejlesztést. Kiváló dokumentációja van, így ebben az írásban nem célunk részletesen ismertetni csupán néhány előnyét szeretnénk bemutatni.
A reszponzív gondolkodás egyik fő vonala, hogy a kijelző méretéhez igazodva osszuk fel a területet blokkokra és határozzuk meg, hogy ezek szélessége hogyan aránylik a különféle felbontások függvényében.
A Bootstrap rácsrendszere 12 részre osztja a kijelzőt illetve akár a konténer elemeket. A "celláknak" tehát megadhatjuk, hogy 1-2...12(100%) részét foglalják a teljes szélességnek.
Nézzünk egy egszerű pédát: ha két "dobozt" szeretnénk egymás mellé tenni, úgy hogy egyforma méretüek legyenek akkor mindkét doboz méretét 6-ra kell állítanunk a keretrendszer eszköztárának használatával. (a .col-6 css class-t kell hozzáadnunk mindkét dobozhoz).
Az eszköztár lehetőséget ad arra is, hogy különböző kijelzőméreten különböző arányban osztozzanak a dobozaink. Boostrapban erre szolgálnak a reszponzív szelektorok .col-xs- (<768px), .col-sm- (>=768px), .col-md- (>=992px), .col-lg- (>=1200px) (részletek a dokumentációban :))
Szuper dolog, hogy a Bootstrap eszköztára mindezekhez tartalmaz előre definuált sítlusokat, elrendezéseket. Mit is értünk ez alatt? A front-end fejlesztés feladata, hogy szebbé tegye a böngésző alapértelmezett szöveg, gomb, link stb. stylusát megjelenését. A keretrendszer használatával egyből kapunk egy egységes, modern, arányos "arculatot" minden html elemhez, így pillanatok alatt építhetünk egy szép weboldalt (persze azon még sokat kell dolgozni, hogy egyedi is legyen).
Néhány példa amire a Bootstrap alapvető formázásokat definiál:
Bootstrapban rengeteg olyan css osztályt kapunk amik segítik a szövegek, képek, stb. pozicionálását. Egy másik cikk témája lesz a Flex viszont itt is meg kelle említenünk, hogy a Boostrap a flex pozicionáláshoz is kínál eszköztárat (ilyen pl.: a vertikális igazítás blokkokon bellül).
Ahogy fentebb említettük a Boostrapban előre definiáltak színeket, betűméreteket és számos további stílus változót. Ezeket természetesen kiegészíthetjük, fellülbírálhatjuk saját stílusokkal (pl.: külön css fájl), viszont érdemes megemlíteni, hogy a Bootstrap használja a Less css megoldást (változók a cssben) és még olyan eszközt is kínál amivel könnyedén testreszabhatjuk a használt színeket méreteket stb.
A React egy Javascript könyvtár, mely komponensekből épül fel és a felhasználói felület...
Pár hónapja egy ismerős kolléga mutatta ezt a javascript képgalériát, ami azóta nagy...
Egy Javascript alapú, jQuery-re épülő dátumválasztó plugin.
