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

@kisskissbankbank/kitten

v14.1.1

Published

Front-end components library

Downloads

6,466

Readme

Kitten

Kitten is a components library based on Sass and React. It provides mixins to create flexible components based on your own brand elements (colors, fonts, typographic scale, etc.).

You can check out Kitten's components on Storybook.

Kittens

Dependencies

  • react >= 16.8.x
  • react-dom >= 16.8.x
  • @babel/polyfill if you support IE10 and previous versions

Table of content

Installation

$ npm install @kisskissbankbank/kitten

Usage

CSS utilities

CSS Utilities are classe that can be used for very basic styling. These utility classes are used by React Components. Kitten will not work properly without these utility classes.

@import '@kisskissbankbank/kitten/src/stylesheets/utilities';

Look at the doc to know if/when to use it.

It is recommended that you use an utility like Purge CSS at build time, to remove all the unused CSS utilities (be sure to include the path of your Kitten dependency so it's taken into account).

React components

You can render React components directly in your js bundle:

import { SimpleCard } from '@kisskissbankbank/kitten'

ReactDOM.render(
  <SimpleCard {...props} />,
  document.getElementById('main')
)

Development

Components

Check out the guidelines to start creating new components!

Install

$ bin/install

Cleanup

To cleanup installed modules:

bin/cleanup

Storybook

To launch storybook locally:

npm run storybook

The page http://localhost:6006 will be opened automatically.

Component testing

To launch the JS tests:

$ npm test

Check out the guidelines to know how to test kitten.

Contributing

To contribute code:

  • Create a pull request on GitHub with a clear title in English.

  • Tag it with the right labels: Needs reviews, Needs testing or Work in progress.

  • Don't forget to update the CHANGELOG.md under the [unreleased] section with the following syntax:

    - Breaking change: a breaking change.
    - Feature: a new feature.
    - Fix: a fix.

To merge code into master:

  • Make sure the code has been reviewed by someone.
  • Make sure it has been tested.
  • Merge using Squash and merge on GitHub.
  • Delete the branch.

Release

Only for KissKissBankBank collaborators

Login

If this is your first release, start by saving your npm credentials in your ~/.npmrc by calling:

$ npm login

Prepare the release pull request

  • Pull master.
  • Update the CHANGELOG.md file:
  • Update the package.json file:
    • Update the version with the version of the library.
  • Update the package-lock.json file:
    • Update the version with the version of the library.
  • Run the command bin/release NEW_VERSION (replace NEW_VERSION with your version number)
  • Follow the link to create the pull request on Github.

Release!

Once the pull request is accepted:

  • Merge the pull request into master.
  • Delete the release branch.
  • Run this command: bin/publish with-storybook
  • Announce the release on KissKissBankBank's #kit-ui Slack channel with the related CHANGELOG when the new release is ready to be used.