10 najpopul├írnej┼í├şch s├║prav webov├ęho pou┼ż├şvate─żsk├ęho rozhrania s otvoren├Żm zdrojom

Pr├ícou so sadami pou┼ż├şvate─żsk├ęho rozhrania front-end m├┤┼żete u┼íetri┼ą ve─ża ─Źasu na v├Żvoj. Najob─ż├║benej┼í├ş je Bootstrap, aj ke─Ć ve─ża homog├ęnnych lokal├şt d├┤veruje tejto ┼ítrukt├║re.

Aby som v├ím dal nejak├║ rozmanitos┼ą, vybral som si m├┤j najlep┼í├ş v├Żber najlep┼í├şch open source r├ímcov pou┼ż├şvate─żsk├ęho rozhrania dostupn├Żch na trhu.

V┼íetky maj├║ jedine─Źn├ę ┼ít├Żly a r├┤zne ├║rovne podpory pre dynamick├ę komponenty. Ak v┼íak tieto ┼ítrukt├║ry prirad├şte k niektor├Żm doplnkom JavaScriptu, m├┤┼żete vytvori┼ą takmer ─Źoko─żvek.

Tie┼ż by v├ís mohlo zauj├şma┼ą: 20 ─żahk├Żch a prisp├┤sobiv├Żch ┼ítrukt├║r CSS pre r├Żchly ┼ítart.

1, UIKit

rámová súprava ui

R├ímec UIKit je ─żahk├Ż, ─żahko prisp├┤sobite─żn├Ż a ─żahko pridate─żn├Ż. Postupujte pod─ża modul├írnej ┼ítrukt├║ry, v ktorej budete vytv├íra┼ą prvky str├ínky s opakovane pou┼żite─żn├Żmi triedami.

Je ide├ílny na ┼ítrukt├║rovanie novej str├ínky bez nutnosti k├│dovania vlastnej mrie┼żky alebo pos├║vania vlastn├Żch st├┤p p├şsem. Tento r├ímec je dod├ívan├Ż s jedine─Źnou sadou ikon, ktor├ę m├┤┼żete prida┼ą na svoju str├ínku pomocou webov├ęho p├şsma.

S UIKitom m├┤┼żete spusti┼ą Sass alebo Less spolu s ktor├Żmko─żvek mana┼ż├ęrom bal├şkov (zvy─Źajne npm).

Navy┼íe, s obrovsk├Żm zoznamom komponentov m├┤┼żete za─Źleni┼ą ─Źoko─żvek od nakladania pol├ş po str├║hanku a ─Ćal┼íie.

2, nadácie

Zurb nadácie

Kni┼żnica Zurb Foundation ┼żije a┼ż po TwitterBootstrap. Zd├í sa v┼íak, ┼że nad├ícia dost├íva menej pozornosti kv├┤li menej efekt├şvnemu rozhraniu.

S Foundation m├íte pr├şstup k prvkom u┼ż├şvate─żsk├ęho rozhrania, komponentom a ┼ítandardnej mrie┼żke. V┼íetko, ─Źo potrebujete na vytvorenie neuverite─żn├ęho rozhrania, n├íjdete v kni┼żnici nad├ície.

Viac inform├íci├ş n├íjdete na ├║vodnej str├ínke. M├í nieko─żko webov├Żch str├ínok prev├ídzkovan├Żch nad├íciou s vlastn├Żmi sie┼ąami, responz├şvnymi funkciami, v podstate v┼íetko, ─Źo potrebujete v novom webovom projekte.

3, miligram

miligram css

Pre minimalistick├Ż pr├şstup k front-end rozvoju, pozrite sa na miligram. T├íto otvoren├í kni┼żnica CSS je ve─żmi mal├í a prich├ídza s mno┼żstvom skuto─Źne jednoduch├Żch funkci├ş rozhrania.

Funguje to prostredn├şctvom Bower, priadze a npm, tak┼że sa zmest├ş do ak├ęhoko─żvek pracovn├ęho postupu spr├ívy bal├şkov.

Jedin├Żm probl├ęmom je, ┼że miligram vy┼żaduje kni┼żnicu Normalizova┼ą, tak┼że ju mus├şte prida┼ą na svoju str├ínku. Ak v┼íak m├íte n├ístroj na minimaliz├íciu CSS, m├┤┼żete obe kni┼żnice ─żahko skombinova┼ą a zn├ş┼żi┼ą tak po┼żiadavky HTTP.

4, One-Nexus

obrázok spojenia

Tu je nov├í front-end kni┼żnica, ktor├í pon├║ka niektor├ę celkom ┼íialen├ę moduly.

┼átrukt├║ra zariadenia One-Nexus je obrovsk├í. Podporuje responz├şvne dizajnov├ę a dotykov├ę zariadenia, be┼ż├ş na serveri Sass a pracuje s automatizovan├Żmi n├ístrojmi na tvorbu obsahu. Mysl├şm si v┼íak, ┼że je to jeden z najkomplexnej┼í├şch r├ímcov, ktor├ę sa maj├║ za─Źa┼ą.

Ak u┼ż pozn├íte ┼ítrukt├║ry a pr├şkazov├Ż riadok, One-Nexus je skuto─Źne ├║┼żasn├Ż. M├í to─żko modulov, ktor├ę v├ís n├║tia oto─Źi┼ą hlavu!

M├┤┼że to v┼íak trva┼ą zvykn├║┼ą si na nastavenie a nastavenie p├┤vodn├ęho rozlo┼żenia dokonale.

5, S├ęmantick├ę pou┼ż├şvate─żsk├ę rozhranie

s├ęmantick├í ┼ítrukt├║ra pou┼ż├şvate─żsk├ęho rozhrania

Ak h─żad├íte testovan├║ ┼ítrukt├║ru, pozrite si s├ęmantick├ę u┼ż├şvate─żsk├ę rozhranie. Toto je kr├ísna kni┼żnica front-end, ktor├í je moment├ílne vo verzii v2.2 s tonami zdrojov.

S├ęmantiku pova┼żujem za nezn├ímu zav├ídzaciu jednotku pre front-end v├Żvoj. To nie je tak popul├írne u hlavn├Żch kod├ęrov, ale m├í rovnak├ę v├Żhody ako Bootstrap.

S├ęmantick├í kni┼żnica obsahuje tla─Źidl├í, karty, rozba─żovacie ponuky, v┼íetko, ─Źo potrebujete. Okrem toho pon├║ka jednoduch├ę ladenie a nieko─żko ├║┼żasn├Żch t├ęm, tak┼że si m├┤┼żete prisp├┤sobi┼ą svoj dizajn od za─Źiatku.

6, ─îist├ę CSS

─Źist├Ż css r├ím

Na niektor├ę mal├ę projekty som pou┼żil ─Źisto CSS a naozaj sa mi to p├í─Źilo. Toto je jedna z najlep┼í├şch ┼ítrukt├║r, preto┼że umo┼ż┼łuje prisp├┤sobi┼ą s├║bory tak, aby obsahovali potrebn├ę funkcie.

Viac inform├íci├ş n├íjdete na domovskej str├ínke, ktor├í obsahuje odkazy na stiahnutie a nieko─żko sprievodcov konfigur├íciou.

V┼íimnite si, ┼że Pureova estetika vyzer├í ve─żmi minimalisticky, ale nie pr├şli┼í jednoducho. Trochu napodob┼łuj├║ Bootstrap, ako aj niektor├ę tipy t├Żkaj├║ce sa materi├ílov├ęho dizajnu od spolo─Źnosti Google. Z├íbavn├í kni┼żnica, ktor├í sa pou┼ż├şva pre ak├Żko─żvek projekt, osobn├Ż alebo komer─Źn├Ż.

7, Sada atramentov├ęho rozhrania

Rám atramentovej súpravy UI

So sadou atramentov├Żch rozhran├ş m├┤┼żete vytv├íra┼ą ├║┼żasn├ę str├ínky, ktor├ę reaguj├║. Bud├║ vyzera┼ą jednoducho a bud├║ sa riadi┼ą ve─żmi jednoduch├Żm form├ítom k├│du, ale zvy─Źajne to, ─Źo chcete, v ┼ítrukt├║re front-end.

Atrament tie┼ż prich├ídza s vlastnou kni┼żnicou JS, ktor├║ m├┤┼żete spusti┼ą vo Vanilla JS. Ak ste predt├Żm farbu nikdy nepou┼żili, bude potrebn├ę vykona┼ą ur─Źit├ę ├║pravy. Je to v┼íak ve─żk├í kni┼żnica porovnate─żn├í s jQuery v syntaxi.

To be┼ż├ş na Sass, pracuje so s├ęmantick├Żm HTML a vyzer├í to ako ak├íko─żvek ve─żk├í front-end ┼ítrukt├║ra.

8, Pr├şpravn├ę pr├íce na CSS

css štruktúra

V GroundworkCSS m├ím st├íle ve─ża testov, ale toto je siln├í ┼ítrukt├║ra reakcie.

V s├║─Źasnosti v USA 2.x si m├┤┼żete stiahnu┼ą cel├║ kni┼żnicu Groundwork v dvoch ┼ít├Żloch: v z├íkladnej HTML / CSS / JS alebo v ┼íabl├│ne pre Ruby on Rails.

Obaja pracuj├║ rovnak├Żm sp├┤sobom a poskytuj├║ robustn├Ż front-end syst├ęm na k├│dovanie pou┼żite─żn├Żch str├ínok.

Pozrite si uk├í┼żku rozlo┼żenia a z├şskajte predstavu o tom, ako to bude vyzera┼ą na va┼íom webe.

9, Materialize.css

materialize.css domovská stránka

Odkedy spolo─Źnos┼ą Google ozn├ímila svoj posun k materi├ílov├ęmu dizajnu, stala sa jedn├Żm z najv├Ą─Ź┼í├şch jazykov dizajnu pou┼ż├şvate─żsk├ęho rozhrania. A hoci bol p├┤vodne vytvoren├Ż pre Android, pri┼íiel na web s mnoh├Żmi ┼ítrukt├║rami, napr├şklad Materialize, klonovan├şm ┼ít├Żlu.

Cel├Ż r├ímec sa vykon├íva pod─ża o─Źak├ívania – plne citliv├Ż, kompatibiln├Ż s normami a podporuje vlastn├ę obnovenie nastaven├ş pre v┼íetky prehliada─Źe.

Jedin├Ż rozdiel spo─Ź├şva v tom, ┼że jeho ┼ítandardn├ę prvky preberaj├║ ┼ít├Żl dizajnu materi├ílu.

Aj ke─Ć je to pravdepodobne m├┤j ob─ż├║ben├Ż obr├ízok dostupn├ęho materi├ílu, m├┤┼żete si prezera┼ą ─Ćal┼íie a zisti┼ą, ─Źo v├ís najviac up├║ta.

10. Dokon─Źi┼ą

dokon─Źovac├ş r├ím

Pokia─ż ide o v├Żkon, nem├┤┼żete ignorova┼ą kvalitu k├│du. Kone─Źn├Ż cie─ż to berie v├í┼żne ako ┼ítrukt├║ru s oh─żadom na v├Żkon.

Je plne prisp├┤sobite─żn├Ż a ve─żmi ─żahko prisp├┤sobite─żn├Ż, ─żahko ─Źitate─żn├Ż HTML a CSS. V┼íetky vykonan├ę ├║pravy bud├║ ma┼ą jasn├║ ┼ítrukt├║ru s konvenciami pomenovania BEM pre CSS.

Skuto─Źn├Żm pr├şnosom pre Topcoat je z├í┼ąa┼żov├Ż test a zameranie na v├Żkon. Ka┼żd├Ż, kto potrebuje vlastn├Ż dizajn, ktor├Ż sa na─Ź├şta r├Żchlo, by si mal vysk├║┼ía┼ą Topcoat.

11. okvetn├ę l├şstok

r├ím okvetn├Żch l├şstkov z CSS

Petal je jednou z najnov┼í├şch ┼ítrukt├║r CSS na trhu. Op├Ą┼ą je plne citliv├Ż, 100% otvoren├Ż zdroj a m├┤┼że podporova┼ą ak├║ko─żvek in├║ d├┤le┼żit├║ ┼ítrukt├║ru v tomto zozname.

Je v┼íak ve─żmi mal├Ż a mus├ş tomu tak zosta┼ą. Je zalo┼żen├Ż na preprocesore Menej CSS a tie┼ż vy┼żaduje Normalizova┼ą.

Nakoniec je to ve─żmi mal├í ┼ítrukt├║ra, ktor├í by mala pril├íka┼ą menej v├Żvoj├írov CSS. ├Ütr┼żky k├│du a dynamick├ę pr├şklady prvkov str├ínky n├íjdete aj v online dokumentoch.