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

react-elegant-ui

v0.3.4

Published

Elegant UI components, made by BEM best practices for react

Downloads

47

Readme

React Elegant UI

UI kit build on react with BEM methodology.

Library focused on reuse, flexibility and performance, give you components and primitives for making web interfaces and your own high quality components.

Features

  • Flexibility - you can build components with only features which you really need, easy add or replace features for library components or build new component from scratch with library primitives and tools. Say no to compromise between making all from zero or use components with reach features many from which is work not as you wish or unnecessary for your use case!
  • Customization - powerful design system allows you define design tokens in config files, use it in your components and easy make themes or change and redefine/override styles between projects
  • Accessible - all components implement WAI-ARIA Authoring Practices and accessible out of box. It's great works with keyboard and screen readers

Getting started

Read the docs to get basic usage examples.

  • To start use components, read components docs which explain how to use components and build components from features
  • To start development your own components from scratch or make features, read component development docs to get known about library tools and style guide

Please, if you don't understand something, create issue to improve documentation and make it clear.

If you can't find something in docs, try search it in source code, most likely it explain there in comments. Consider that docs will never contain all details of all features implementations, cuz world changes too fast. Aim of docs is explain concepts and details of interfaces, show examples, but not of implementations.

Contributing

This project is real opensource and focus to community driven development.

It's mean that it make for all, but not for purposes of some company and you can join to development and suggest any ideas.

You even can make break changes which destroy back compatibility, if it make library better and you can proof this.

It's very different this project from many other libraries which make for company purposes and can't allow you do something that force them refactor their code.

This approach mean also:

  • Focus on documentation. All features must be described in detail
  • Code is not contains references to private resources, like inner site with docs access only for stuff accounts
  • All development plans is public and discuss with community

Welcome to contribute. Please, read CONTRIBUTING.md and Contributing rules before.

Support policy

As told above, this library allow breaking changes, so it may not match for "too stable" enterprise projects. But for every breaking change will make migration guide if it possible and not trivial.

Also all code and library scripts and tools try be as simple as possible and code is coveraged linters and documentation, it makes possible standalone support of any version of this library. It's good guarantees for active developed projects.

To get list of supported browsers see .browserslistrc file in root of repository.

Some principles:

  • We don't support IE and other old browsers officially, but usually you can do it self
    • You must use your own polyfills
    • We use css variables in themes, so you must compile this to static values. You can use PostCSS plugins for this like postcss-theme-fold
    • If some component is not work and you can't fix it with polyfills and handling of sources, you shall rewrite only features which is not work for you and compose with other features which you want. It's very cheap for you
  • Experemental features with prefixes (i.e. UNSAFE_, UNSTABLE_) may be removed in any time
  • All exported objects which is not documented may be removed in any time
  • Inner tools and scripts not strict obey SemVer