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á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
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
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
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
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
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
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
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
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ť
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
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.
