Rails Bootstrap UI :: Rails Bootstrap Ui

👋 Welcome to Rails Bootstrap UI.

A UI framework for Ruby On Rails, based on Bootstrap.

This website is built using Lookbook.

If you find it useful, give it a ⭐️ on GitHub.

What does Rails Bootstrap UI do? 🤨

It edits some default Bootstrap variables to make all bootstrap components look more modern.
It gives more examples of how to combine existing Bootstrap classes to create new components.
~~It adds animations~~ WIP
It adds some new components that are not present in Bootstrap, using, for example other libraries.
It show examples on how to use these components in your Turbo-powered Rails app. This means that we will use Stimulus controllers to attach javascript behavior to our components.

Have a look at the Buttons to see an example of a simple Bootstrap component, or at the Avatar to check how you can combine existing utility classes to obtain new components.

Development principles 🛠️

Ruby On Rails: we don't aim to make this UI framework work without Rails. It's Rails-specific.
Bootstrap: we want to use Bootstrap as the base for our components. There are many other UI Frameworks based on Tailwind out there: this is a Bootstrap one.
SCSS: sass is a dependency of this project. We will strive to use pure CSS whenever this is possible.
Rails-frontend agnostic: we don't want any dependency over ViewComponent or Phlex or other libraries, although we ❤️ them. We might still use those to provide some integration examples, but they are not a requirement.
Hotwire-ready: we will use stimulus controllers to attach javascript behavior to our components. Stimulus is our guarantee that each component is hotwire-ready.
This is developed by Renuo AG, a Swiss software company. It is open-source and free to use, but the main goal is to provide a better developer experience for our developers. ## What do you get with Rails Bootstrap UI

At the moment this is a Website that shows you how to use the components. You can easily copy-paste the code to your app or take inspiration.

We would like, in the future, to also provide a rails-bootstrap-ui gem that you can bundle.

Thanks ❤️

Thanks to Lookbook for providing a great way to document components.

Thanks to Renuo AG for sponsoring this project.

Lookbook v2.3.2

{ "version": "2.3.2", "env": "production", "config": { "project_name": "Rails Bootstrap Ui", "project_logo": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 70 63\">\n <defs>\n <style>.cls-2{fill:#fff;}</style>\n</defs>\n <title>Renuo_Full_Lockup</title>\n <g>\n <path class=\"cls-2\" d=\"M59,11.65a2.88,2.88,0,0,1-.59-.06,3.62,3.62,0,0,1-.56-.17,3.25,3.25,0,0,1-.52-.28,2.74,2.74,0,0,1-.83-.83,3.15,3.15,0,0,1-.28-.51A3.62,3.62,0,0,1,56,9.24a3.51,3.51,0,0,1,0-1.18,3.62,3.62,0,0,1,.17-.56A3.74,3.74,0,0,1,56.45,7a3.16,3.16,0,0,1,.37-.45,2.82,2.82,0,0,1,.46-.38,3.2,3.2,0,0,1,.52-.27,2.78,2.78,0,0,1,.56-.17,2.88,2.88,0,0,1,1.17,0,2.78,2.78,0,0,1,.56.17,3.2,3.2,0,0,1,.52.27,3.32,3.32,0,0,1,.46.38,4,4,0,0,1,.37.45,2.86,2.86,0,0,1,.27.52,2.81,2.81,0,0,1,.18.56,3,3,0,0,1,.06.59,3.06,3.06,0,0,1-.88,2.12,3.22,3.22,0,0,1-1,.65,3.62,3.62,0,0,1-.56.17A2.86,2.86,0,0,1,59,11.65Z\"/>\n <path class=\"cls-2\" d=\"M46.14,11.65a3,3,0,0,1-3-3,3.92,3.92,0,0,1,0-.59,2.81,2.81,0,0,1,.18-.56A2.86,2.86,0,0,1,43.64,7,3.23,3.23,0,0,1,44,6.53a2.74,2.74,0,0,1,.45-.38A3.2,3.2,0,0,1,45,5.88a2.78,2.78,0,0,1,.56-.17,2.88,2.88,0,0,1,1.17,0,2.78,2.78,0,0,1,.56.17,3.2,3.2,0,0,1,.52.27,2.82,2.82,0,0,1,.46.38,3.16,3.16,0,0,1,.37.45,3.74,3.74,0,0,1,.28.52,3.62,3.62,0,0,1,.17.56,2.93,2.93,0,0,1,0,1.18,3.62,3.62,0,0,1-.17.56,3.15,3.15,0,0,1-.28.51,2.74,2.74,0,0,1-.83.83,3.25,3.25,0,0,1-.52.28,3.62,3.62,0,0,1-.56.17A2.86,2.86,0,0,1,46.14,11.65Z\"/>\n <path class=\"cls-2\" d=\"M59,28.73a3.07,3.07,0,0,1-2.13-.87,3.22,3.22,0,0,1-.65-1,3.62,3.62,0,0,1-.17-.56,2.88,2.88,0,0,1,0-1.17,3.62,3.62,0,0,1,.17-.56,3.22,3.22,0,0,1,.65-1,3.13,3.13,0,0,1,4.25,0,4.14,4.14,0,0,1,.37.46,3.25,3.25,0,0,1,.28.52,3.62,3.62,0,0,1,.17.56,2.88,2.88,0,0,1,0,1.17,3.62,3.62,0,0,1-.17.56,3.25,3.25,0,0,1-.28.52,4.14,4.14,0,0,1-.37.46A3.07,3.07,0,0,1,59,28.73Z\"/>\n <path class=\"cls-2\" d=\"M7.71,28.74a3,3,0,0,1,0-6H46.14a3,3,0,0,1,0,6Z\"/>\n <path class=\"cls-2\" d=\"M58.94,45.81H33.33a3,3,0,0,1,0-6H58.94a3,3,0,0,1,0,6Z\"/>\n <path class=\"cls-2\" d=\"M7.71,11.66a3,3,0,0,1-.59-.06,3.62,3.62,0,0,1-.56-.17,3.15,3.15,0,0,1-.51-.28,2.76,2.76,0,0,1-.46-.37,3,3,0,0,1-.88-2.12,2.88,2.88,0,0,1,.06-.59,3.62,3.62,0,0,1,.17-.56A3.25,3.25,0,0,1,5.22,7a2.69,2.69,0,0,1,.37-.45,2.82,2.82,0,0,1,.46-.38,2.49,2.49,0,0,1,.51-.27,2.78,2.78,0,0,1,.56-.17,2.93,2.93,0,0,1,1.18,0,2.78,2.78,0,0,1,.56.17,2.86,2.86,0,0,1,.52.27,3.23,3.23,0,0,1,.45.38,2.74,2.74,0,0,1,.38.45,3.2,3.2,0,0,1,.27.52,2.78,2.78,0,0,1,.17.56,2.88,2.88,0,0,1,0,1.17,2.6,2.6,0,0,1-.17.56,2.8,2.8,0,0,1-.65,1,3.16,3.16,0,0,1-.45.37,3.74,3.74,0,0,1-.52.28,3.62,3.62,0,0,1-.56.17A3,3,0,0,1,7.71,11.66Z\"/>\n <path class=\"cls-2\" d=\"M33.33,11.66H20.52a3,3,0,0,1,0-6H33.33a3,3,0,0,1,0,6Z\"/>\n <path class=\"cls-2\" d=\"M12,62.89H7.71a3,3,0,1,1,0-6H12a3,3,0,1,1,0,6Z\"/>\n <path class=\"cls-2\" d=\"M41.87,62.89H24.79a3,3,0,0,1,0-6H41.87a3,3,0,0,1,0,6Z\"/>\n <path class=\"cls-2\" d=\"M20.52,45.81a3,3,0,0,1-2.13-.88,4,4,0,0,1-.37-.45,2.86,2.86,0,0,1-.27-.52,2.81,2.81,0,0,1-.18-.56,3.92,3.92,0,0,1-.05-.59,3.79,3.79,0,0,1,.05-.58,2.9,2.9,0,0,1,.18-.57,2.49,2.49,0,0,1,.27-.51,3.38,3.38,0,0,1,.37-.46,3,3,0,0,1,2.71-.82,3.62,3.62,0,0,1,.56.17,3.22,3.22,0,0,1,1,.65,2.76,2.76,0,0,1,.37.46,3.15,3.15,0,0,1,.28.51,3.74,3.74,0,0,1,.17.57,2.86,2.86,0,0,1,.06.58,3,3,0,0,1-.06.59,3.62,3.62,0,0,1-.17.56,3.74,3.74,0,0,1-.28.52,3.16,3.16,0,0,1-.37.45,3.32,3.32,0,0,1-.46.38,3.2,3.2,0,0,1-.52.27,2.78,2.78,0,0,1-.56.17A2.86,2.86,0,0,1,20.52,45.81Z\"/>\n <path class=\"cls-2\" d=\"M7.71,45.81a3,3,0,0,1-2.12-.88,3.16,3.16,0,0,1-.37-.45A3.74,3.74,0,0,1,4.94,44a3.62,3.62,0,0,1-.17-.56,3,3,0,0,1-.06-.59,2.86,2.86,0,0,1,.06-.58,3.74,3.74,0,0,1,.17-.57,3.15,3.15,0,0,1,.28-.51,2.76,2.76,0,0,1,.37-.46,3,3,0,0,1,2.71-.82,3.62,3.62,0,0,1,.56.17,3.74,3.74,0,0,1,.52.28,3.16,3.16,0,0,1,.45.37,2.82,2.82,0,0,1,.38.46,3.1,3.1,0,0,1,.27.51,3.16,3.16,0,0,1,.23,1.15,3,3,0,0,1-.06.59,2.78,2.78,0,0,1-.17.56,3.67,3.67,0,0,1-.27.52,3.5,3.5,0,0,1-.83.83,3.67,3.67,0,0,1-.52.27,2.78,2.78,0,0,1-.56.17A3,3,0,0,1,7.71,45.81Z\"/>\n <path class=\"cls-2\" d=\"M58.94,62.89H54.67a3,3,0,0,1,0-6h4.27a3,3,0,0,1,0,6Z\"/>\n </g>\n</svg>\n", "preview_collection_label": "Previews", "preview_nav_filter": true, "preview_paths": [ "app/components/previews" ], "preview_display_options": { }, "preview_controller": "Lookbook::PreviewController", "preview_template": "lookbook/previews/preview", "preview_inspector": { "main_panels": [ "preview", "output" ], "drawer_panels": [ "source", "notes", "params", "*" ], "sidebar_panels": [ "previews", "pages" ] }, "preview_embeds": { "enabled": true, "policy": "SAMEORIGIN", "panels": false, "actions": [ ], "scenarios": [ ], "display_option_controls": true }, "preview_layout": null, "preview_disable_action_view_annotations": true, "preview_disable_action_view_partial_prefixes": true, "preview_type_default": "view_component", "preview_sort_scenarios": false, "preview_disable_error_handling": false, "page_collection_label": "Pages", "page_nav_filter": true, "page_controller": "Lookbook::PageController", "page_route": "pages", "page_paths": [ "test/components/docs" ], "page_extensions": [ "html.*", "md.*" ], "page_options": { }, "markdown_options": { "tables": true, "fenced_code_blocks": true, "disable_indented_code_blocks": true, "strikethrough": true, "highlight": true, "with_toc_data": true, "lax_spacing": true }, "highlighter_options": { "theme": "github", "dark": false }, "component_paths": [ "app/views", "app/components" ], "reload_on_change": false, "live_updates": false, "listen_paths": [ ], "listen_extensions": [ "rb", "html.*" ], "autoload_previews": true, "ui_theme": "green", "ui_theme_overrides": { }, "ui_favicon": true, "log_level": 2, "log_use_rails_logger": true, "debug_menu": true, "links": { "docs": "https://v2.lookbook.build", "demo": "https://v2-demo.lookbook.build", "repo": "https://github.com/lookbook-hq/lookbook/tree/v2" }, "using_view_component": false, "default_preview_layout": "application", "dependencies": { "actioncable": true, "listen": false, "view_component": false }, "panels": { "css": { "label": "CSS", "hotkey": null, "disabled": false, "show": true, "copy": null, "locals": "#<Proc:0x00007f69da8663c0 /app/config/initializers/lookbook.rb:20 (lambda)>", "partial": "panels/assets", "name": "css" }, "js": { "label": "JS", "hotkey": null, "disabled": false, "show": true, "copy": null, "locals": "#<Proc:0x00007f69dc099d70 /app/config/initializers/lookbook.rb:20 (lambda)>", "partial": "panels/assets", "name": "js" } }, "inputs": { }, "tags": { } } }