Najnovije u web dizajnu - FlatStrap

Ako vam se svideo Bootstrap i novi način dizajniranja sajtova, upoznajte se sa najnovijim dodatkom za ovaj popularni framework.

FlatStrap je dodatak za popularni Bootstrap i omogućava vam da pretvorite svoj sadašnji dizajn u Bootstrapu u nešto poptuno novo. O Bootstrapu smo već pisali i članak možete pročitati ovde.

 

 

FlatStrap je jednostavan dodatak koji dodajete na već postojeći dizajn napravljen u Bootstrap-u. Ono što ovaj dodatak nudi jeste Flat design. Flat design se sastoji od ravnih ivica, jasnih fontova i što jednostavnijih oblika, baš to ga čini toliko popularnim i trenutno je trend u web dizajnu. Kod Bootstrapa se ipak koriste uokvirene ivice pa je ovaj dodatak napravljen baš zbog toga, da pretvori vaš postojeći dizajn u Flat design. Ako želite da saznate više o Flat designu pročitajte naš članak o tome šta je trenutno popularno u dizajnu. Članak možete pročitati ovde.

Da bismo vam dočarali šta je tačno promenjeno i šta je ono što FlatStrap nudi pronašli smo nekoliko slika na kojima možete videti kako izgleda dizajn u Bootstrapu a kako izgleda pomoću novog dodatka za Flat dizajn.

Dizajn u Bootstrapu:

Dizajn u FlatStrapu

 

 

Dodavanje  FlatStrap-a

Za one koji ne koriste Bootstrap

Ako ne koristite Bootstrap takođe možete koristiti FlatStrap i dovoljno je da ga preuzmete sa adrese: http://www.flatstrap.org/ i dodate na svoj sajt. Na ovaj način preuzeli ste i Bootstrap tako da ne morate njega odvojeno preuzimati.

Za one koji već koriste Bootstrap

Ako ste već koristili Bootstrap i dodali ga na vaš sajt, ne morate preuzimati FlatStrap, dovoljno je da prekopirate sledeći kod na dno vaše bootstrap.css datoteke.

.well, .navbar-inner, .popover, .btn, .tooltip, input, select, textarea, pre, .progress, .modal, .add-on, .alert, .table-bordered, .nav>.active>a, .dropdown-menu, .tooltip-inner, .badge, .label, .img-polaroid {

  -moz-box-shadow: none !important;

    -webkit-box-shadow: none !important;

    box-shadow: none !important;

    -webkit-border-radius: 0px !important;

    -moz-border-radius: 0px !important;

    border-radius: 0px !important;

    border-collapse: collapse !important;

    background-image: none !important;

}

Korišćenje

FlatStrap koristite isto kao i Bootstrap. Na zvaničnoj stranici postoje svi nazivi klasa i komponenata kao i JavaScript dodaci. Kada dodate FlatStrap na vaš sajt, odnosno njegove JavaScript biblioteke i CSS fajlove, jednostavno izaberete sa sajta naziv klase koji vam je potreban i dodate ga komponenti na vašem sajtu. Ako vam se svide neke od komponenti potrebno je da prekopirate kod sa sajta i stavite svoj sadržaj u njega, ovaj postupak je isti i ako želite da koristite JavaScript.

Primeri korišćenja FlatStrapa

 

 

Postoji mnogo sajtova koje već koriste FlatStrap i neke od primera možete pogledati na sledećim linkovima:

http://wrapbootstrap.com/preview/WB0N1X0T1

http://spaceindustrynews.com/

 

Inspiracija – izvori:

http://bootstrap.newbridgegreen.com/images/screenshot-small.png

http://creatiface.com/wp-content/uploads/2013/06/cosmo.jpg

http://www.flatstrap.org/

http://dribbble.s3.amazonaws.com/users/227499/screenshots/1167066/flatstrap_sketch_freebie.png

http://www.wdstandards.com/wp-content/uploads/2013/08/10-Flatstrap.jpg

Tags: 
Aktuelan: