Installation

Installation of RailsbootUI is fairly simple. Make sure you follow the requirements and you should be good to go!

All of RailsbootUI components are designed for the latest versions of Bootstrap, view components and the current stable version of Ruby on Rails. As for now, this means:

• Bootstrap in version 5.3.x
• View components in version >= 3.0
• Ruby on Rails in version >= 7.0

However, as long as you have Bootstrap in the major version running in Rails along with a valid view component installation, you should be on the safe side.

In order to use RailsbootUI you need to have Bootstrap installed within your Rails application. Since Bootstrap can be installed in several ways in Rails (e.g. Importmaps, as a separate process in a node environment, with a CDN), we assume you have a working Bootstrap setup in your Rails app.

Our components come as a solid component implementation of a certain required frontend module in a typical web app. It's a copy & paste offering, with the core idea to let you tweak and adapt any changes you'd like. So it's super easy to use. The only dependencies are the working Rails app with bootstrap and the gem view_components as the base foundation.

To use our free components just hit the "Download"-Button underneath each component page. You'll get a ZIP-Folder, containing all the necesary files to get you going. Just copy & paste the files into your app.

When you sign up, you can decide to purchase a professional license, which will give you instant access to the code of the pro components. As with the free components, you can then just copy & paste the files inside the ZIP-Filder inside your app.

As soon as you download a component we package a ZIP folder that contains certain files and that need to be put in your app. Each component comes with the files for the component inside the app/components directory and the files for testing inside the test/components directory. Let's look at them one by one:

• The component class: app/components/railsboot/component.rb

  The component class is the parent class for all of our components. It contains constants and methods which are shared. It's initially placed inside our railsboot namespace, but you can place it inside your components directory anywhere you'd like to.

• The base component: app/components/railsboot/base_component.rb

  The base component is an internal class for rendering with all html attributes passed into it.

• The component ruby file: app/components/railsboot/example_component.rb

  The component ruby file is the actual component you want to render. Sometimes the component uses inline rendering, so you do not need a corresponding view component template file.

• The component erb file: app/components/railsboot/example_component.html.erb

  Usually, a component comes with a corresponding view template file. This file is the actual HTML structure of the component.

• Pure component slots: app/components/railsboot/example/*

  If the component defines nested slots which are only used in this particular component, they are placed inside a subfolder of the component folder. So the component defines another module namespace. For example in the Railsboot::AccordingComponent there is a slot component called Railsboot::Accordion::ItemComponent.

• Additional assets: app/components/railsboot/example/*

  If the component defines additional assets such as SCSS files or JS files (Stimulus controllers) they are also placed inside a subfolder with the component naming. Ensure that you move these files to your appropiate loading paths for assets in your app.

• Dependent components

  If the component relies on other components that are not dependent on the component itself, they are included with inside the download as well. Treat them as you would treat the main component you downloaded.

• Test files: test/components/railsboot/example_component_test.rb

  The test files are placed inside the test directory in the download. They are named after the component they are testing. The test files are written in Minitest. If the component defines any component slots, there are additional test files for those slots.

Most apps probably want some sort of customization for their bootstrap combponents. Bootstrap offers a wide range of customization options for this. Since bootstrap relies on SASS, it's probably easiest to overwrite the various SASS variables Bootstrap consists of. As soon as you overwrite them, RailsbootUI will adapt those changes as well. For the free components, no additional CSS has been introduced, so every Bootstrap variable change should be reflected in our components as well. The pro components can include additional frontend assets such as SASS files or JS-Files. Make sure to place them in you right app folders so that they are picked up correctly.