Интерфейсы пользователя
Перейти к навигации
Перейти к поиску
Прежде всего, конечно, речь пойдет о веб интерфейсах, т.к. веб очень популярен и браузер уже давно стал универсальным инструментом доступа к информации. В подборке будут указаны ссылки на свободные или бесплатные компоненты.
Design
Colors
- Как Создать Свою Цветовую Палитру? ОСНОВЫ СОЧЕТАНИЯ ЦВЕТОВ
- ТЕОРИЯ ЦВЕТА В ВЕБ-ДИЗАЙНЕ | ЦВЕТОВОЙ КРУГ
- ЦВЕТОВЫЕ СХЕМЫ: КАК СОЧЕТАТЬ ЦВЕТА
Fonts
Logos
Icons
Spacings
Workflows
- Web as
- Documents (wiki)
- Spreadsheets (tables, numbers..)
- Presentations (landings)
- Selectors
- Tabs
- Wizard
- Split screen (Norton Commander)
- Windowed
- Dashboards
- Check engine
- Tree (comments, folders)
- Files (Icons, List, Table)
- Side panels (menu, top, right, bottom, left)
- Panel
- Start menu
- Notifications
- Header / Footer
- Unlimited Scroll
- Pinterest images
- Bulk
- Creation
- Edit
- Multiple value
- Change value +/-/*/div
- Delete
- Restore
Learn & Docs
Browser tests
- https://www.acidtests.org/
- https://html5test.com/
- https://browserbench.org/
- https://chromium.github.io/octane/
- https://webkit.org/perf/sunspider/sunspider.html
- https://webglsamples.org/aquarium/aquarium.html
Node.js
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash nvm install 18.20.2
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - sudo apt-get install -y nodejs
sudo npm install npm@latest -g
npm config set registry http://registry.npmjs.org/
npm cache clear --force
npm config set strict-ssl false
npm config set legacy-peer-deps true
echo '{}' > ./package-lock.json
npm i
jQuery
Angular
sudo npm install -g @angular/cli
- https://angular.io/
- (!!!) https://angular.io/resources?category=development
- https://ng-bootstrap.github.io/
- https://github.com/ngx-rocket/generator-ngx-rocket
- https://tiberiuzuld.github.io/angular-gridster2/
- https://bertrandg.github.io/angular-split/#/
- https://github.com/ManifestWebDesign/angular-gridster
- https://robferguson.org/blog/2019/06/22/dashboards-and-dashboard-widgets-part-1/
- https://angularjs.org/ - устарел
- Angular 9 - What's New? What changed? - https://www.youtube.com/watch?v=TcdhAxDWWxM
- I only ever use *these* RxJS operators to code reactively
- The easy way to handle ASYNC PIPE errors reactively
- Web Standalone Components
- How To Build An Angular App Once And Deploy It To Multiple Environments
ng new angular-17 ng generate environments ng add @angular/pwa ng add @angular/localize ng add @angular/animations ng add @angular/platform-browser ng add bootstrap ng add bootstrap-icons ng add @ng-bootstrap/ng-bootstrap ng add @fortawesome/fontawesome-free ng add @ng-select/ng-select
Libs
- https://ng-select.github.io/ng-select#/data-sources
- https://github.com/ObaidUrRehman/ng-drag-drop#demo
Vue.js
ReactJS
Aurelia
WebPack
Typography Grid
- https://loremipsum.io/
- https://generator.lorem-ipsum.info/
- http://gridcalculator.dk/
- http://gridinator.com
- http://grid.mindplay.dk
- https://www.gridlover.net/try
CSS tricks
- https://cssgradient.io/
- https://animate.style/
- https://animista.net/
- https://css-tricks.com/almanac/properties/f/filter/
- Learn CSS Border Animations in 6 Minutes
CSS processors
Design Systems
- https://getbootstrap.com/
- https://bulma.io/
- https://get.foundation/
- https://ant.design/
- https://material.io/design/
- https://semantic-ui.com/
- https://www.muicss.com/
- https://material-ui.com/
- https://material.angular.io/
- https://truly-ui.com/
- https://wrapbootstrap.com/
- https://bootswatch.com/
- http://www.csszengarden.com/
- https://get.foundation/
- https://html5boilerplate.com/
- https://mdbootstrap.com/
- https://jdan.github.io/98.css/
- https://fusetheme.com/
favicon
Icons
- https://fontawesome.com/
- https://github.com/lothat/weather-icons
- https://ionicons.com/
- http://fontello.com/
- http://fontastic.me/
- https://www.flaticon.com/
- https://thenounproject.com/
- https://useiconic.com/
- https://feathericons.com/
- https://primer.style/foundations/icons/
- https://github.com/danklammer/bytesize-icons
- https://coreui.io/icons/
- https://fonts.google.com/icons
- http://demo.amitjakhu.com/dripicons/
- https://ikons.piotrkwiatkowski.co.uk/
- https://icons8.com/
- https://icofont.com/
- https://tabler.io/icons
Fonts
- http://patorjk.com/software/taag/
- https://fonts.google.com/ (https://golb.hplar.ch/2019/06/google-fonts-download.html)
- sudo npm install -g goog-webfont-dl
- goog-webfont-dl -o src/assets/fonts/FiraSans/font.css -p /assets/fonts/FiraSans -d src/assets/fonts/FiraSans -a "Fira Sans"
- goog-webfont-dl -f "Roboto Slab" -d ./src/assets/fonts/RobotoSlab -o ./src/assets/fonts/RobotoSlab/font.css -p /assets/fonts/RobotoSlab -a -y 100,200,300,400,500,600,700,800,900,100italic,200italic,300italic,400italic,500italic,700italic,800italic,900italic -u latin,latin-ext,vietnamese,greek,greek-ext,cyrillic,cyrillic-ext
- https://fonts.adobe.com/fonts
- https://www.1001freefonts.com/
- https://www.myfonts.com/
- https://www.artlebedev.ru/type/
- https://www.fonts-online.ru/
- https://www.dafont.com/
- https://www.urbanfonts.com/free-fonts.htm
- https://www.fontshare.com/
- https://www.freefaces.gallery/
- https://www.dafont.com/
- https://velvetyne.fr/
- https://dirtylinestudio.com/
WYSIWYG editors
What You See Is What You Get
- https://www.tiny.cloud/
- https://www.froala.com/wysiwyg-editor/v2.0
- https://ckeditor.com/ckeditor-5/
- https://www.axsoft.co/?ref=producthunt
- https://jaredreich.com/pell/?ref=producthunt
- https://quilljs.com/
- https://draftjs.org/
- https://trix-editor.org/
- https://prosemirror.net/
- https://codemirror.net/
- https://habr.com/ru/companies/oleg-bunin/articles/350252/
Landing page editors
Tables & Spreadsheets
- https://datatables.net/
- https://slickgrid.net/
- https://jspreadsheets.com/
- https://handsontable.com/
- https://nexts.github.io/Clusterize.js/
- https://www.datatables.net
- https://www.ag-grid.com/
- http://ui-grid.info
- http://adazzle.github.io/react-data-grid/
- http://www.bossanova.uk/jexcel
- http://tabulator.info
- http://ng-table.com
- http://guriddo.net/?page_id=102666
- http://backgridjs.com/
- http://okfnlabs.org/recline
- http://lorenzofox3.github.io/smart-table-website
- http://w2ui.com
- http://addepar.github.io/ember-table
- https://slickgrid.net/
- http://www.jtable.org
- https://github.com/davidguttman/react-pivot
- https://github.com/datazenit/sensei-grid
- https://github.com/felixrieseberg/React-Spreadsheet-Component
- http://dgrid.io
- https://github.com/handsontable/vue-handsontable-official
- http://spreadsheets.github.io/WickedGrid/
- http://paramquery.com
- http://handsontable.com
- https://github.com/handsontable/react-handsontable
- http://josebalius.github.io/ngReactGrid
- https://www.pontikis.net/labs/bs_grid/demo
- https://github.com/ghiscoding/Angular-Slickgrid
- https://github.com/miadwang/sou-react-table
- https://fancygrid.com
- https://github.com/energydrink9/functional-data-grid
- http://handsontable.github.io/hot-table
- https://turnerniles.github.io/react-virtualized-pivot
- http://www.pontikis.net/labs/jui_datagrid
- https://www.kendoreact.com
- http://team-lab.github.io/cell-cursor/example.html
- http://www.inspireproduction.co.za/#/home
- https://github.com/key-lime-box/dynamic-table
- http://reconstrukt.com/ingrid
- http://www.Syncfusion.com
- http://dreakmore.info/tgrid
- http://boriscy.github.io/grider
- http://reactdatagrid.com
Music Notes & ABC notaton
Math & formulas
Grids & Blocks
Croppers
Charts & Graphs
- https://www.chartjs.org/
- http://www.flotcharts.org/
- http://polymaps.org/
- https://d3js.org/
- https://rawgraphs.io/
- http://dygraphs.com/
- https://apexcharts.com/
- https://visjs.org/
- Finance
Maps
- https://www.vincentbroute.fr/mapael/
- https://www.10bestdesign.com/jqvmap/
- http://jvectormap.com/
- http://kartograph.org/
- http://planetaryjs.com/
- https://openlayers.org/
Image Viewers & Sliders
- http://www.highslide.com/
- https://fotorama.io/
- https://glidejs.com/
- https://www.jssor.com/
- https://wowslider.com/
- https://swiperjs.com/
- https://kenwheeler.github.io/slick/
Players
- https://videojs.com/
- https://plyr.io/
- http://www.mediaelementjs.com/
- https://github.com/paypal/accessible-html5-video-player
- http://afterglowplayer.com/
- http://www.videogular.com/
- https://github.com/etianen/html5media
- http://player.kaltura.com/docs/
- https://github.com/azatoth/jquery-video
- https://github.com/rsms/html5-video/
- http://jplayer.org/
- https://www.jwplayer.com/
См. также: Видео и аудио кодирование
Pinterest blocks
- https://masonry.desandro.com/
- https://salvattore.js.org/
- https://savvior.org/
- https://github.com/yconst/Freetile
- http://blog.xlune.com/2009/09/vgrid/
Super Select
- https://harvesthq.github.io/chosen/
- https://github.com/michaelperrin/ajax-chosen
- https://select2.org/
- https://selectize.github.io/selectize.js/
- https://www.github.com/pytesNET/tail.select
- http://loopj.com/jquery-tokeninput/
- http://davidstutz.de/bootstrap-multiselect/
- https://github.com/Mobius1/Selectr
Visual Effects
Parallax, dots, globes, etc..
- https://matthew.wagerfield.com/parallax/
- https://vincentgarreau.com/particles.js/
- https://www.jotform.com/blog/particles-animation-codepen-97659/
- https://codepen.io/ImagineProgramming
- https://codepen.io/aecend
- https://geargenerator.com/
- https://www.sliderrevolution.com/resources/css-animated-background/
- https://beltoforion.de/en/spiral_galaxy_renderer/spiral-galaxy-renderer.html
- https://threejs.org/examples/
Glass Effect
- https://wpdean.com/css-glassmorphism/
- https://hype4.academy/tools/glassmorphism-generator
- https://webdesign.tutsplus.com/how-to-create-a-frosted-glass-effect-in-css--cms-32535t
- https://css.glass/
Globe
- https://github.com/vasturiano/three-globe
- https://codepen.io/qkevinto/pen/EVGrGq
- https://github.com/turban/webgl-earth
- https://stripe.com/blog/globe
- https://miniature.earth/
- https://github.com/earthjs/earthjs
3D & WebGL
Custom Scrollbars
- https://github.com/Grsmto/simplebar
- https://github.com/mdbootstrap/perfect-scrollbar
- http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html
- https://github.com/gromo/jquery.scrollbar
- https://github.com/inuyaksa/jquery.nicescroll
- https://github.com/Diokuz/baron
- https://github.com/malte-wessel/react-custom-scrollbars
Date & Time pickers
Emoji
- https://www.webfx.com/tools/emoji-cheat-sheet/
- https://unicode.org/emoji/charts/full-emoji-list.html
- https://github.com/iamcal/js-emoji
- https://github.com/joypixels/emojify.js
- https://www.kirupa.com/html5/emoji.htm
- https://www.jqueryscript.net/tags.php?/emoji/
Drawers
- https://jspaint.app/
- https://github.com/nhn/tui.image-editor
- https://www.youidraw.com/apps/painter/
- https://carstenschaefer.github.io/DrawerJs/examples/standalone/
- http://canvimation.github.io/
- http://paperjs.org/examples/division-raster/