Top 10 najobľúbenejších súprav webového používateľského rozhrania s otvoreným zdrojom

Môžete ušetriť veľa času na vývoj pomocou súprav používateľského rozhrania frontend. Najobľúbenejší z nich je Bootstrap, aj keď príliš veľa homogénnych stránok sa na tento rámec spolieha.

Aby som vám dal nejakú rozmanitosť, vybral som si môj výber najlepších najnovších open source rámcov používateľského rozhrania.

Všetky majú svoje vlastné jedinečné štýly a rôzne úrovne podpory pre dynamické komponenty. Ak však tieto rámce spárujete s niektorými doplnkami JavaScript, môžete vytvoriť takmer čokoľvek.

Tiež by vás mohlo zaujímať: 20 prispôsobiteľných a ľahkých rámcov CSS pre rýchly štart.

1, UIKit

Rám UIKit je ľahký, ľahko prispôsobiteľný a ľahko pridateľný. Postupujte podľa modulárnej štruktúry, kde 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 rolovania vlastných stôp písma. 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 UIKit 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 záťažových 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 vlastného rozhrania, komponentom a predvolenej mriežke. Všetko, čo potrebujete na vybudovanie úžasného frontendu, nájdete v knižnici nadácie.

Viac informácií nájdete na ich prezentačnej stránke. Má veľa obrovských stránok prevádzkujúcich nadáciu s vlastnými sieťami, responzívnymi funkciami, v podstate všetko, čo potrebujete v novom webovom projekte.

3, miligram

miligram css

Minimalistický prístup k vývoju frontendu nájdete v miligramoch. 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

rám jedného spoja

Tu je novšia knižnica frontend, ktorá v skutočnosti ponúka niektoré celkom šialené moduly.

Rámec One-Nexus je rozsiahly. Podporuje responzívne dizajnové a dotykové zariadenia, beží na Sass a pracuje s automatizovanými nástrojmi na vytváranie. Domnievam sa však, že je to jeden z najkomplexnejších rámcov.

Ak už poznáte rámce a príkazový riadok, program One-Nexus je skutočne úžasný. Má toľko modulov, že vás donúti otočiť hlavu!

Trvá však nejaký čas, kým si na nastavenie zvyknete a dokonale nastavíte pôvodné rozloženie.

5, Sémantické používateľské rozhranie

sémantický rámec používateľského rozhrania

Ak hľadáte testovanú štruktúru, pozrite sa na sémantické užívateľské rozhranie. Toto je krásna frontendová knižnica, ktorá je momentálne vo verzii v2.2 s množstvom funkcií.

Sémantiku považujem za neznámu zavádzaciu jednotku pre vývoj frontendu. To nie je tak populárne u špičkový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. Navyše ponúka jednoduché ladenie a veľa úžasných tém, takže si môžete svoj dizajn prispôsobiť už od začiatku.

6, Čisté CSS

čistý css rám

Použil som Pure CSS na niektoré malé projekty a naozaj si to užívam. Toto je jeden z najlepších rámcov, pretože vám 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 je veľmi minimalistická, ale nie príliš jednoduchá. Napodobňujú trochu Bootstrapu a niektoré tipy týkajúce sa materiálového dizajnu Google. Zábavná knižnica na použitie v akomkoľvek projekte, osobnom aj komerčnom.

7, Sada atramentového rozhrania

rám atramentovej sady ui

So sadou rozhraní pre atrament môžete vytvoriť niekoľko úžasných stránok, ktoré reagujú. Vyzerajú jednoducho a budú sledovať veľmi jednoduchý formát kódu, ale to je zvyčajne to, čo chcete v rozhraní frontend.

Atrament dokonca prichádza s vlastnou knižnicou JS, ktorú môžete spustiť na serveri Vanilla JS. Ak ste predtým predtým atrament nepoužívali, bude potrebné vykonať nejaké úpravy. Je to však veľká knižnica porovnateľná s jQuery v syntaxi.

To beží v Sass, pracuje so sémantickým HTML a vyzerá to ako akýkoľvek skvelý frontendový rámec.

8, Prípravné práce na CSS

css rámec

Stále musím urobiť veľa testov v GroundworkCSS, ale toto je rámec silnej reakcie.

Momentálne vo verzii 2.x si môžete stiahnuť celú knižnicu Groundwork v dvoch štýloch: Basic HTML / CSS / JS alebo v šablóne pre Ruby on Rails.

Obidve fungujú rovnako a poskytujú robustný frontendový systém na kódovanie použiteľných stránok.

Pozrite sa na ich ukážku a získajte predstavu o tom, ako to bude vyzerať na vašom webe.

9, Materialize.css

materialize.css domovská stránka

Od chvíle, keď spoločnosť Google oznámila svoj posun k dizajnu materiálov, sa stala jedným z najväčších jazykov dizajnu používateľského rozhrania. Aj keď bol pôvodne vytvorený pre Android, dostal sa na web s mnohými rámcami, ako je Materialize, klonovanie štýlu.

Celý rámec beží podľa očakávania – plne citlivý, v súlade so štandardmi a podporuje vlastné obnovenie nastavení pre všetky prehliadače.

Jediný rozdiel je v tom, že jeho predvolené prvky nadobúdajú štýl dizajnu materiálu.

Aj keď je to pravdepodobne môj obľúbený rámec dostupného materiálu, môžete si prezerať ďalšie a zistiť, čo ešte vás upúta.

10. Dokončiť

dokončovací rám

Pokiaľ ide o výkon, nemôžete prehliadnuť kvalitu kódu. Topcoat to berie vážne ako rámec s ohľadom na výkon.

Je plne prispôsobiteľný a veľmi ľahko prispôsobiteľný pomocou ľahko čitateľného HTML a CSS. Všetky úpravy, ktoré vykonáte, 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 rýchlo načíta, by mal vyhľadať vrchný lak.

11. okvetné lístok

rám okvetných lístkov z CSS

Petal je jedným z najnovších rámcov CSS na trhu. Opäť je plne citlivý, 100% otvorený zdroj a môže podporovať akýkoľvek iný hlavný rámec v tomto zozname.

Je však pomerne malý a má zostať týmto spôsobom. Je založený na preprocesore Menej CSS a tiež vyžaduje Normalizovať.

V konečnom dôsledku je to veľmi malý rámec, ktorý by sa mal odvolať na vývojárov Menej CSS. Útržky kódu a živé príklady prvkov stránky môžete nájsť aj v online dokumentoch.