npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

belle

v4.0.0

Published

Configurable React Components with great UX

Downloads

93

Readme

Belle

Configurable React Components with great UX.

Website & Documentation: http://nikgraf.github.io/belle/

Build Status Dependency Status peerDependency Status

Getting Started

Belle is available as npm package. Once you have npm you can install Belle in your project folder with:

npm install belle

Import & use Belle Components

We recommend you to get started with 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.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
</head>
<body>
  <div id="react-root"></div>
  <!--
    You can use browserify, webpack or similar tools
    to compile & combine your JSX code
  -->
  <script src="bundle.js"></script>
</body>
</html>
var React = require('react');
var belle = require('belle');
var TextInput = belle.TextInput;

var App = React.createClass({

  render: function() {
    return (
      <div>
        <TextInput defaultValue="Update here and see how the input grows …" />
      </div>
    );
  }
});

React.render(<App/>, document.getElementById('react-root'));

Learn more

In addition you can dig through the documentation to learn about how to modify Belle components.

Browser Support

  • Chrome (mobile and desktop)
  • Safari (mobile and desktop)
  • Firefox
  • Internet Explorer 9, 10, 11

Philosophy

"Great UX starts with a good UI"

With Belle I'm aiming to provide a library that follows a couple well established principles. While some of them might not be consider best practice today We believe they will become some day in the near future.

Easy to use

The most important attribute of any great experience is that there was no hassle to achieve the initial goals.

Consistent Behavior

Every object someone interacts with has it's own little language. This language must be learned by everyone getting in touch with a new set of object. In order to provide a great experience the amount to learn should be reduced to a minimum.

There are two major personalities to target with Belle. One is the developer. For him/her APIs should be provided in a consistent way through all components. The other and more important is the users of the components. Every color, animation or behavior should be aligned with the other components to provide a great experience.

Encapsulate Styles

There is no reason while a style designed one specific element should affect others. In CSS styles are often defined by overwriting previous ones and introducing deeper and deeper nesting. Once nesting is introduced resolution of styles for one specific element is not a trivial task anymore. Due this managing CSS dependencies is hard. It is hard to predict how an application looks like after updating or removing dependency.

That's why with Belle styles should apply to the components themselves in the DOM. By doing so the visual appearance and business logic are combined in location.

Every Interaction is followed up with Feedback

Let people know how their behavior affects the system. It assures them that their input was acknowledged which provides them with a feeling of control over the system.

High Performance

The user should see affects of their actions instantly. Any delay can cause confusion and frustration. While instant certainly is not always possible Belle strives to provide an experience close to instant.

Development

You can install the development environment with

npm install

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.

Run the examples or docs application

To 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.

Tests

In order to run the tests use

npm test

To run the test continuously you can use npm run test:watch.

Discussion or need help?

In addition you can ask the community by posting your question to StackOverflow with the belle tag..

Future Plans

  • Components to add: Dateformatter, Datepicker, Tooltip, Popover, Modal, Navigation Menu, NumberInput, EmailInput, Anchor, DropZone

Special Thanks

Thanks to Andrey Popp & Eugene for their inspiring work on React TextArea Autosize which kind of ignited the idea of Belle.

Thanks to Christian Steiner from http://www.cropd.at/ for creating the logo and helping out with the design.

Special thanks to Jyoti Puri for the tremendous amount of work she put into this endeavor.

License

MIT