Jquery::Ui::Suite

Jquery::Ui::Suite is a gem that integrates jQuery UI v1.14.1 and jQuery v3.7.1 assets seamlessly into your Rails application. This gem allows you to configure the jQuery UI theme you want to use and includes the latest versions of jQuery and jQuery UI by default.

• Installation
• Configuration
• Usage
• Styles
• Contact

Add jquery-ui-suite to your Gemfile and run bundle install:

gem 'jquery-ui-suite'

After installing, run the generator to create an initializer for configuring the gem:

rails generate jquery_ui_suite:install

The gem includes a configuration initializer located at config/initializers/jquery_ui_suite.rb, where you can customize the theme used for jQuery UI.

In config/initializers/jquery_ui_suite.rb, set your desired theme:

Jquery::Ui::Suite.setup do |config|
  config.jquery_ui_theme = "base"
  config.include_jquery = true
end

Available themes include base, black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness and vader.

Import jQuery and jQuery UI In your application's importmap.rb file, pin the JavaScript files:

pin "jquery", to: "jquery-3.7.1.min.js", preload: true
pin "jquery-ui", to: "jquery-ui-1.14.1.min.js", preload: true

In app/javascript/application.js, import jQuery and jQuery UI:

import "jquery"
import "jquery-ui"

// Make jQuery globally available
window.$ = window.jQuery = globalThis.jQuery

In app/assets/stylesheets/application.scss, import the theme you selected in the initializer:

// Replace 'base' with your selected theme
@import "jquery-ui/themes/base/jquery-ui.min";
@import "jquery-ui/themes/base/theme";

Available themes include base, black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness and vader.

Contributions are welcome! Feel free to report bugs or submit pull requests.

For questions or further information, feel free to reach out via LinkedIn.