Uistiti UI kit for Rails

This gem holds everything you need (UI speaking) to create nice User interface. It comes with CSS style (customisable for sure) and Javascript out of the bout. For productivity enhancement i also published a VsCode extension wich give you snippets for all the component of the library.

Example of something that have been built very fast with the GEM demo (The source code is here)

LookBook of the different component developped during the Hackathon

Quick video to explain how it work

Usage

How to use the plug in :

Installation

Add this line to your application's Gemfile:

gem "uistiti"

And then execute:

$ bundle

Now in your views you can use Uistiti components just as normal ViewComponents :

<%= render Uistiti::Alpha::Flex.new(direction: :column, justify_content: :space_between)  do %>
 <%= items %>
<% end %>

For the CSS & style : All the CSS files relies on a set of variables, if you want to start using styled component you can import them in you application.scss file

//app/assets/stylesheets/aplication.scss
@import 'uistiti/config/variables';

If you want to update the colors and the different design tokens, you can dowload the file and modify the values you want and import the local file instead of the one from the gem.

Then, for each component you use you can import the related css

//app/assets/stylesheets/aplication.scss
@import 'uistiti/config/variables';
@import 'uistiti/components/alpha/flex';

For Component with javascript behavior, there is no much things to do, the controllers are automatically registered through the asset pipe line and import-map:

//app/assets/config/manifest.js
...
//= link uistiti_manifest.js

#config/importmap.rb
...
pin_all_from Uistiti.stimulus_controllers_directory, under: "controllers/uistiti"

and you should be good to go, no npm, nothing more 🥰

Contributing

Contribution directions go here.

License

The gem is available as open source under the terms of the MIT License.