KissKissBankBank's front-end components library
Clone or download
Failed to load latest commit information.
.circleci [Devops] Fix deploy script (#1326) Oct 15, 2018
.github Add storybook template `PR` (#1160) Apr 16, 2018
.storybook [ImageCropper] Add canvas data when I return object on onChange handl… May 2, 2018
app [HowToBorrow] Update LinkBox with Radium (#1365) Oct 30, 2018
assets [ProjectPage] Add `viewportIsLOrLess` range to MediaQueries HOC (#1410) Nov 15, 2018
bin Use `.nvmrc` version in `bin/install` (#1391) Nov 9, 2018
config Update menu style (#620) May 4, 2017
docs/installation Styleguide V2 - Add new font (#860) Nov 15, 2017
lib v23.12.0 (#1409) Nov 15, 2018
public/sassdoc v23.12.0 (#1409) Nov 15, 2018
spec [HowToBorrow] Update LinkBox with Radium (#1365) Oct 30, 2018
src [Stability] Build JS files (#1145) Aug 29, 2018
vendor/assets [Stability] Remove sassy-maps (#1271) Aug 8, 2018
.babelrc Add Jest (#1020) Jan 16, 2018
.dockerignore Fix deploy by adding removed foreman gem (#1141) Apr 5, 2018
.gitattributes Reduce CHANGELOG conflicts (#69) Aug 18, 2016
.gitignore [Devops] Fix deploy tools & upgrade nodejs & yarn (#1325) Oct 11, 2018
.npmignore Add config folder to published package (#1046) Jan 22, 2018
.nvmrc Fix node version & dependencies & bin/install (#1390) Nov 9, 2018
.rubocop.yml Mixins et fonctions pour la typographie (#3) Jun 27, 2016
.ruby-version [Devops] Fix deploy script (#1326) Oct 15, 2018
.sassdocrc Update sassdoc groups (#37) Aug 2, 2016
.stylelintrc Style the Select component (#107) Sep 19, 2016 [ProjectPage] Add `viewportIsLOrLess` range to MediaQueries HOC (#1410) Nov 15, 2018
CodeBuildDockerfile [Devops] Do not use bundle --deployment in local (#1333) Oct 15, 2018
Dockerfile [Devops] Do not use bundle --deployment in local (#1333) Oct 15, 2018
Gemfile [KARL] Update React on Rails to 11.1.6 (#1323) Oct 11, 2018
Gemfile.lock v23.12.0 (#1409) Nov 15, 2018 v23.12.0 (#1409) Nov 15, 2018
LICENCE.txt Update module for open-sourcing publication (#263) Dec 8, 2016 Update readme (#1299) Sep 6, 2018
Rakefile [Storybook] Update release task (#1369) Oct 25, 2018
buildspec.yml Add AWS CodePipeline support (#708) Jul 3, 2017
kitten.gemspec [Stability] Update React on Rails (#1329) Oct 15, 2018
package.json v23.12.0 (#1409) Nov 15, 2018
yarn.lock [Triptych] Fix triptych margin (#1402) Nov 15, 2018


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 KissKissBankBank's styleguide.

It is an npm module coupled with a Rails engine that provides an integrated styleguide. It should eventually be separated into two different repositories.



  • Ruby 2.2.4
  • Bundler (gem install bundler)
  • Node ~> 6.0

Table of content


You can choose to use the npm module only or with the Rails engine.


npm install kitten-components --save-dev

Rails engine

Add this line to your application's Gemfile:

# Style guide
gem 'kitten'

And these routes to your routes.rb:

mount Kitten::Engine, at: '/kitten' if Rails.env.development?

You can then run bundle and restart your server.

kitten is designed to serve assets with Webpack through React on Rails.

For more detailed instructions, see Rails webpack configuration.


CSS components

Import kitten and the components your want to use in your application:

@import 'kitten';

@include k-Button;

You can define your own font families, typography settings and colors by overriding the the $k-fonts, $k-typography and $k-colors options. Check out the default config for an example.

React components

You can render React components directly in your js bundle:

const yourLoanSimulatorProps = {}

  React.createElement(LoanSimulator, yourLoanSimulatorProps),

Or, use React on Rails view helper in your .erb file:

<%= react_component('LoanSimulator', props: your_loan_simulator_props) %>

Style guide

Kitten provides a styleguide interface through a Rails engine. You can run see it in your browser by downloading kitten and launching the app or by installing the style guide in your Rails app.

The engine provides some configuration options that can be defined in config/initializers/kitten.rb:

  • webpack_output_bundle: This option is used to pass an output bundle name for hot reloading. By default, it is set to application-bundle.

Example configuration:

Kitten.configure do |config|
  config.webpack_output_bundle = 'your-custom-bundle'



Check out the guidelines to start creating new components!


$ bin/kitten install

Style guide

To launch the style guide with hot-reloading, install overmind, then:

$ bin/start

Then visit http://localhost:3003

Background app

To launch the style guide in the background without hot-reloading:

$ bin/kitten start

Then visit http://localhost:3000

To stop the app:

$ bin/kitten stop

To check wether it is running or not:

$ bin/kitten status

To tail the app logs in real time:

$ bin/kitten log

Hit Ctrl+C to stop the tail.

Production settings

To share the style guide with production settings (to share via ngrok for example), you can compile the assets and serve a production server:

$ bin/rake staging:assets:precompile
$ REACT_ON_RAILS_ENV= rails s -b


To cleanup installed modules:

bin/kitten cleanup

Style checker

$ yarn stylelint

Ruby specs

$ bundle exec rake


We use SassDoc to generate documentation from our components comments.

Generate the documentation:

$ bundle exec rake sassdoc
# OR
$ yarn sassdoc

The documentation is accessible on development environment: /kitten/sassdoc.

Component testing

To launch the JS tests:

$ bin/kitten test

# OR

$ bin/test {PATH}/{FILE}.test.js

Check out the guidelines to know how to test kitten.


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 under the [unreleased] section with the following syntax:

    - Breaking change: a breaking change.
    - Feature: a new feature.
    - Fix: a fix.
  • Update the under the [unreleased] section if you added some updates to the styleguide.

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.

Static Dump

To build an on disk static file mirror:

$ bin/kitten buildstatic
  • files are located in build/


Only for KissKissBankBank collaborators


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

$ yarn login

Prepare the release pull request

  • Pull master.
  • Update the file:
  • Update the file:
    • Update the version with the version of the library.
    • Add a new [unreleased] section.
  • Update the version in lib/kitten/version.rb.
  • Update the version in package.json.
  • Run this command:
$ bundle exec rake kitten_prepare_release
  • Follow the link to create the pull request on Github.
  • Announce the release on KissKissBankBank's #kit-ui Slack channel with the related CHANGELOG.


Once the pull request is accepted:

  • Merge the pull request into master.
  • Delete the release branch.
  • Run this command:
$ bundle exec rake kitten_release


  • To launch storybook in local
npm run storybook

Then visit http://localhost:6006

  • To release Storybook simply run this command:
yarn deploy-storybook