{"id":13394763,"url":"https://github.com/nikgraf/belle","last_synced_at":"2025-05-14T23:07:00.212Z","repository":{"id":28985993,"uuid":"32512635","full_name":"nikgraf/belle","owner":"nikgraf","description":"Configurable React Components with great UX","archived":false,"fork":false,"pushed_at":"2019-10-09T20:37:40.000Z","size":19351,"stargazers_count":2498,"open_issues_count":48,"forks_count":103,"subscribers_count":48,"default_branch":"master","last_synced_at":"2025-04-13T19:50:06.362Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://nikgraf.github.io/belle/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nikgraf.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-19T09:36:11.000Z","updated_at":"2025-03-29T12:05:37.000Z","dependencies_parsed_at":"2022-09-03T18:01:44.707Z","dependency_job_id":null,"html_url":"https://github.com/nikgraf/belle","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikgraf%2Fbelle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikgraf%2Fbelle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikgraf%2Fbelle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikgraf%2Fbelle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nikgraf","download_url":"https://codeload.github.com/nikgraf/belle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254243362,"owners_count":22038046,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T17:01:30.760Z","updated_at":"2025-05-14T23:06:55.205Z","avatar_url":"https://github.com/nikgraf.png","language":"JavaScript","readme":"# Belle\n\nConfigurable React Components with great UX.\n\nWebsite \u0026 Documentation: [http://nikgraf.github.io/belle/](http://nikgraf.github.io/belle/)\n\n[\u003cimg src=\"https://cloud.githubusercontent.com/assets/223045/8707250/f77634f8-2b34-11e5-92d1-f0b0fe44ade9.png\" width=\"50%\"\u003e](http://nikgraf.github.io/belle/)\n\n[![Build Status](https://travis-ci.org/nikgraf/belle.svg)](https://travis-ci.org/nikgraf/belle)\n[![Dependency Status](https://david-dm.org/nikgraf/belle.svg)](https://david-dm.org/nikgraf/belle)\n[![peerDependency Status](https://david-dm.org/nikgraf/belle/peer-status.svg)](https://david-dm.org/nikgraf/belle#info=peerDependencies)\n\n## Getting Started\n\nBelle is available as [npm](http://npmjs.org) package. Once you have npm you can install Belle in your project folder with:\n\n```\nnpm install belle\n```\n\n### Import \u0026 use Belle Components\n\nWe recommend you to get started with [React](https://facebook.github.io/react/) first. Once you have a simple application setup you can import any Belle component and use it right away. No stylesheets, font or any other prerequisite needed.\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"utf-8\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"react-root\"\u003e\u003c/div\u003e\n  \u003c!--\n    You can use browserify, webpack or similar tools\n    to compile \u0026 combine your JSX code\n  --\u003e\n  \u003cscript src=\"bundle.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n```javascript\nvar React = require('react');\nvar belle = require('belle');\nvar TextInput = belle.TextInput;\n\nvar App = React.createClass({\n\n  render: function() {\n    return (\n      \u003cdiv\u003e\n        \u003cTextInput defaultValue=\"Update here and see how the input grows …\" /\u003e\n      \u003c/div\u003e\n    );\n  }\n});\n\nReact.render(\u003cApp/\u003e, document.getElementById('react-root'));\n```\n\n### Learn more\n\nIn addition you can dig through the [documentation](http://nikgraf.github.io/belle/) to learn about how to modify Belle components.\n\n## Browser Support\n\n- Chrome (mobile and desktop)\n- Safari (mobile and desktop)\n- Firefox\n- Internet Explorer 9, 10, 11\n\n## Philosophy\n\n\"Great UX starts with a good UI\"\n\nWith Belle I'm aiming to provide a library that follows a couple well established\nprinciples. While some of them might not be consider best practice today\nWe believe they will become some day in the near future.\n\n### Easy to use\n\nThe most important attribute of any great experience is that there was no hassle to achieve\nthe initial goals.\n\n### Consistent Behavior\n\nEvery object someone interacts with has it's own little language. This language\nmust be learned by everyone getting in touch with a new set of object. In order\nto provide a great experience the amount to learn should be reduced to a minimum.\n\nThere are two major personalities to target with Belle. One is the developer.\nFor him/her APIs should be provided in a consistent way through all components.\nThe other and more important is the users of the components. Every color,\nanimation or behavior should be aligned with the other components to provide\na great experience.\n\n### Encapsulate Styles\n\nThere is no reason while a style designed one specific element should affect\nothers. In CSS styles are often defined by overwriting previous ones and introducing\ndeeper and deeper nesting. Once nesting is introduced resolution of styles for one\nspecific element is not a trivial task anymore. Due this managing CSS dependencies\nis hard. It is hard to predict how an application looks like after updating or\nremoving dependency.\n\nThat's why with Belle styles should apply to the components themselves in the DOM.\nBy doing so the visual appearance and business logic are combined in location.\n\n### Every Interaction is followed up with Feedback\n\nLet people know how their behavior affects the system. It assures them that\ntheir input was acknowledged which provides them with a feeling of control over\nthe system.\n\n### High Performance\n\nThe user should see affects of their actions instantly. Any delay can cause confusion\nand frustration. While instant certainly is not always possible Belle strives to\nprovide an experience close to instant.\n\n## Development\n\nYou can install the development environment with\n\n```\nnpm install\n```\n\n`npm run build` will trigger a build into the `lib` folder. To develop a component it's convenient to use the examples or docs application.\n\n### Run the examples or docs application\n\nTo run the examples or docs you go into the folder `docs` or `examples` and run `npm install` and `npm start`. The app will run with hot reloading on `http://localhost:3000`.\n\n### Tests\n\nIn order to run the tests use\n\n```\nnpm test\n```\n\nTo run the test continuously you can use `npm run test:watch`.\n\n## Discussion or need help?\n\nIn addition you can ask the community by [posting your question to StackOverflow with the **belle** tag.](http://stackoverflow.com/questions/ask?tags=belle).\n\n## Future Plans\n\n- Components to add: Dateformatter, Datepicker, Tooltip, Popover, Modal, Navigation Menu, NumberInput, EmailInput, Anchor, DropZone\n\n## Special Thanks\n\nThanks to [Andrey Popp](https://github.com/andreypopp) \u0026 [Eugene](https://github.com/eugene1g) for their inspiring work on [React TextArea Autosize](https://github.com/andreypopp/react-textarea-autosize) which kind of ignited the idea of Belle.\n\nThanks to Christian Steiner from [http://www.cropd.at/](http://cropd.at) for creating the logo and helping out with the design.\n\nSpecial thanks to [Jyoti Puri](https://github.com/jpuri) for the tremendous amount of work she put into this endeavor.\n\n## License\n\nMIT\n","funding_links":[],"categories":["JavaScript","Uncategorized","UI Frameworks","Cases"],"sub_categories":["Uncategorized","Responsive"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnikgraf%2Fbelle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnikgraf%2Fbelle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnikgraf%2Fbelle/lists"}