Nakon nekoliko godina honorarnog rada u Front-end programiranju, počeo sam da tražim posao u većim kompanijama zarad usavršavanja znanja kroz rad na velikim i zahtevnim projektima. Kad god sam se prijavljivao za posao, dobijao sam zadatke kojim su poslodavci hteli da procene nivo mojih znanja i veština. U toku tog perioda sam shvatio da gubim dosta vremena na postavci projekta.

U ovom članku ću vam pokazati kako da napravite postavku za projekat, i kako se koristi moj SASS/BEM NADA boilerplate. Ovaj boilerplate sadrži HTML5 template, JQuery, Slick slider, Material Icons i još mnogo toga što će vam pomoći da završite zadatke brže.

Zašto baš ove tehnologije?

SASS CSS preprocesor nam omogućava da pišemo CSS u malim, preglednim modulima. Sa ovim boilerplate-om ćete imati početnu prednost kad su u pitanju osnovni stilovi i struktura za komponente.

Ono što nam pruža jasnoću i preglednost je BEM (Block-Element-Modifier). Ovo je tehnologija koja služi da olakša modularizaciju Front-end programiranja tako što svodi komponente na blokove koji se mogu modifikovati po želji.

Material Icons – većina ljudi koristi ‘’Font-awesome’’ pa sam se stoga odlučio za drugu grupu ikonica s obzirom da želimo da budemo drugačiji.

jQuery – brza, mala i raznovrsna JavaScript biblioteka koja, uz pomoć API-ja koji je jednostavan za korišćenje i koji radi u velikom broju browser-a, znatno olakšava izvođenje radnji poput pročešljavanje i manipulacija dokumenta, rukovanje događajima, animiranja i AJAX poziva.

Slick carousel – poslednji carousel koji će vam biti potreban: u potpunosti responsive, mogućnost swipe-a, drag-a, autoplay-a, tačke, strelice, callback-ovi itd.
Preporučujem vam da koristite komentare – da bi vam kod izgledao profesionalnije i bio razumljivi – kao i to da poštujete konvencije pri imenovanju klasa i promenljivih.

Počnite s radom

Kako se koristi boilerplate – Kada ga preuzmete, unutra ćete naći ‘assets’ folder i ‘index.html’ fajl. Unutar ‘assets’ folder-a ćete naći tri subfolder-a: ‘css’, ‘images’ i ‘js’.

Struktura fajlova:

SASS

Instalacija – postoji nekoliko različitih instalacionih metoda, u zavisnosti od toga koji sistem koristite. Sve potrebne informacije možete pronaći na stranici http://sass-lang.com/install . Ukoliko koristite operativni sistem Windows, postoje mnoge dobre aplikacije koje će vam pomoći da pokrenete SASS u svega nekoliko minuta. Lično bih vam preporučio da koristite Koala i Prepros.

Uputstvo za upotrebu – unutar CSS folder-a ćete naći SASS folder u kom se nalaze komponente i subfolder-i.
Komponente – Ovde ćete ubacivati komponente poput header-a, footer-a, banner-a, grid item-a itd.
U ‘config’ folder-u ćete naći dva subfolder-a: ‘global’ i ‘variables’.
Global – opšta podešavanja će vam pomoći u razvoju pošto je u njima sadržan CSS reset sa opštim podešavanjima browser-a. U tipografiji je default dimenzija fonta podešena na 10px, tako da u projektu možemo da koristimo REM-ove zarad lakšeg rada sa responsive-om. Tamo možete izabrati font koji želite da koristite u projektu. Druga opcija je da jednostavno dodate promenljivu sa vrednošću fonta u folder ‘variables’ za lakše korišćenje.

Variables – u ovaj folder ćete staviti sve promenljive koje su vam potrebne. Neke promenljive, poput boja i media query, su automatski uključene.

Ukoliko nemate iskustvo u radu sa SASS tehnologijom, možete je brzo i lako savladati tako što ćete pročitati http://sass-lang.com/guide , pod uslovom da imate iskustvo sa radom u CSS-u.

BEM

Instalacija – nema instalacije s obzirom da je BEM samo metodologija koja vam pomaže da napravite ponovo upotrebljive komponente i podelite kod.

Uputstvo za upotrebu – Najbolje je pročitati dokumentaciju sa zvanične stranice http://getbem.com/naming/ . Kada izučite dokument, možete pogledati primer koji će vam vizualno ilustrovati kako se BEM metodologija koristi na ovom linku https://codepen.io/AttilaBre/pen/EbYdNj .

Ostala pomagala kao što su ‘Material icons’, ‘jQuery’ i ‘Slick’ su vam takođe na raspolaganju ako su vam potrebni da završite zadatak na kom radite.
Ako se odlučite za neku od ovih tehnologija, ovi linkovi će vas odvesti do zvanične dokumentacije:
Material Icons – https://material.io/icons/
jQuery – https://api.jquery.com/
Slick Slider – http://kenwheeler.github.io/slick/

Nadam se da će vam ovaj članak pomoći u tome da brže otpočnete sa radom na projektima i zadacima, kao i u tome da pronađete posao.

Preuzmite NADA boilerplate ovde.