twitter bootstrap

Twitter Bootstrap je alat za brzi razvoj web aplikacija. Tačnije to je kolekcija CSS i HTML pravila i JavaScript ekstenzija koja koristi neke najnovije tehnike pretraživača, pruža modernu tipografiju, forme, dugmad, tabele, okvire i navigaciju i sve što vam je potrebno u jednom malom resursu.

Kratka istorija

Na samim počecima Twitter-a, inženjeri su koristili skoro svaku biblioteku kako bi se upoznali sa front-end zahtevima. Nedosedenosti između pojedinih aplikacija dovode do poteškoča u njihovom skaliranju i održavanju. Bootstrap je počeo kao odgovor na ove izazove, razvijen tokom prvog Twitter Hackweek-a, kada je objavljena prva stabilna verzija koju su  inženjeri mogli koristiti u kompaniji.

Uz pomoć povratne infomacije od mnogih inženjera, Bootstrap je značajno porastao i obuhvatio je ne samo osnovne stilove, već  i elegantne i trajne front-end obrasce. Prva verzija Bootstrap-a objavljena je u avgustu 2011. godine kao open source izdanje, a u februaru 2012. je postao najpopularniji projekat na GitHub-u.

Zašto koristiti Bootstrap

U svom jezgru Bootstrap je CSS, ali je izgrađen uz pomoć Less-a, fleksibilnog pre-procesora koji pruža mnogo više mogućnosti i fleksibilnosti za korisnike nego obični CSS. Sa Less-om dobijamo niz funkcija kao što su ugnježdene deklaracije, varijable, operatori i još mnogo opcija. Pored toga pošto je Bootstrap čisti CSS, kada ga kompajlirmo putem Less-a, dobijamo dve važne prednosti:

Prvo, Bootstrap  se veoma lako inplementira, samo je potrebno da ga ubacite u kod i to je to. Kompaliranje Less-a se može postići putem JavaScript-a, pomoću Mac aplikacije ili preko Node.js.

Drugo, kada se jednom kompajlira Bootstrap ne sadrži ništa drugo nego CSS,  što znači da nema suvišnih slika, Flash-a ili Java Script-a. Sve što ostaje je jednostavan i moćan CSS za vaše potrebe Web development-a.

Bootstrap struktura

Twitter Bootstrap

Kada malo bolje pogledate Bootstrap, primetićete da smo razvojni fajlovi podeljeni  u sedam posebnih delova:

  • reset.less  – služi za resetovanje CSS, napravio ga je Erik Mejer i modifikovao za   potrebe Boootstrap-a uklonivši nepotrebne elemente.
  • preeboot.lessColor varijable i mixins za kreiranje gradijenata, transparencije i drugih efekata sa ciljem da se pojednostave CSS prefiksi i smanji količina koda.
  • scaffolding.less – osnovni i globalni stilovi za generisanje grid sistema, strukturnog rasporeda i šablona stranica.
  • type.less  – za naslove, tekst, liste, kod i još mnogo drugih elementa tipografije.
  • patterns.less – ponovljivi elementi interfejsa poput navigacije, modali i tool tip-ovi.
  • forms.less – stilovi za različite ulazne tipove poput formi i kontrola.
  • tables.less  – stilovi za tabelarne podatke za različite rezolucije displeja.

Pošto je CSS podeljen u više upravljivih delova za jednostvanu organizaciju i iteraciju, kampajliranjem ovih fajlova uz pomoć Less-a znači da na kraju dobijamo samo jedan CSS  fajl koji treba da pozovemo u našem HTML kodu.

Bootstrap je veoma poplularan među web developerima u što se možete uveriti ako pogledate zvaničnu stranicu projekta na GitHub-u, a sudeći po trenutnom interesovanju i broju aktivnih učesnika očekuje ga svetla budućnost.

Jovan Ivezic

E-business and internet marketing specialist.