BootstrapBux

Bootstrap Bux is a Rails-y way of including the mandatory OSU headers and footers to any website, using the basic BUX color scheme and fonts, while still allowing you to use the Bootstrap (5.3+) framework.

Installation

To use this gem, you must first add Bootstrap (v. 5 or later) to your Gemfile, following the instructions at https://rubygems.org/gems/bootstrap

Add the bootstrap_bux gem to the application's Gemfile:

gem 'bootstrap_bux'

and then

$ bundle install

Usage

Once the gem is installed, place a configuration file at config/initializers/bootstrap_bux.rb with the following contents:

BootstrapBux.configure do |config|
  # update these configuration options with your actual departmental info
  config.department_name = "My Office"
  config.building_room = "100 Building Name"
  config.address = "1 Oval Mall"
  config.email = "email@osu.edu"
  config.phone = "614-292-OHIO"
  config.fax = "614-555-5555"

  # only add urls for these if your application/lab/department actually has a presence on the platform
  config.facebook = nil
  config.twitter = nil
  config.instagram = nil
  config.linkedin = nil
  config.youtube = nil
  config.tiktok = nil

  # add values for these if you wish to include a login link in the footer
  config.signin_link = nil
  config.signout_link = nil
end

Editing the options in this file will allow you to change the contents of the footer to reflect actual departmental info. Note that if you do not enter URLs for the social media sites those items will be omitted from the footer, but you must include values for all other contact attributes.

Within your Rails application, rendering headers and footers is simple.

In your CSS/SCSS file:

@import 'bootstrap_bux/application';

In your view (most likely in the application layout):

= render 'bootstrap_bux/osu_header'

and

= render 'bootstrap_bux/osu_footer_dark'

or

= render 'bootstrap_bux/osu_footer_light'

or

= render 'bootstrap_bux/osu_footer_white'

If you wish to include a login link in your footer, be sure to include link information in the config file (see above), and add a signed_in? argument to your render statement. For a standard Devise setup, this might looks like:

= render 'bootstrap_bux/osu_footer_white', signed_in?: user_signed_in?

Favicons

To use the Bootstrap Bux favicons, in the header section of your application layout, replace any existing favicon tag with the following:

= render 'bootstrap_bux/favicon'

This will cause your application to render different favicons for development, staging, and production, allowing you to see quickly which of your browser tabs is using which environment. Note that, in order for the icon files to load, you may need to update your staging and production environments with the line

config.assets.compile = true

Supported BUX CSS classes

Links:

.bux-link, .bux-link--before, .bux-link--after, .bux-link--reverse, .bux-link--alt, .bux-link--scarlet

Buttons:

.bux-button, .bux-button--disabled, .bux-button--alt, .bux-button--small, .bux-button--alt-small, .bux-button--icon, .bux-button__icon

OSU Header:

.bux-osu-nav, #osu-nav-trigger, .bux-osu-nav__link, #osu-navname-block, .bux-osu-nav__osu-logo-img

OSU Footer:

.bux-footer, .bux-footer__logo, .bux-footer--light, .bux-footer__fine-print, .bux-footer--dark, .bux-footer--white, .bux-footer__logo, .bux-footer__contact, .bux_footer__email, .bux_footer__fax, .bux_footer__phone, .bux_footer__site-name, .bux-footer__social, .bux-social-links, .bux-social-links__item, .bux-social-links__link

Breadcrumbs:

.bux-breadcrumb, .bux-breadcrumb__item, .bux-breadcrumb__item--current, .bux-breadcrumb__link, .bux-breadcrumb--alt

Accordions:

Accordions are slightly different in that they require Bootstrap JS. To build BUX-styled accordions, use the standard Bootstrap 5 accordion HTML, and add the bux-accordion class to the top-most level of the accordion.

Development

After checking out the repo, run bin/setup to install dependencies. Then, run rake spec to run the tests. You can also run bin/console for an interactive prompt that will allow you to experiment.

To install this gem onto your local machine, run bundle exec rake install. To release a new version, update the version number in version.rb, and then run bundle exec rake release, which will create a git tag for the version, push git commits and the created tag, and push the .gem file to rubygems.org.

Contributing

Bug reports and pull requests are welcome on GitHub at https://code.osu.edu/asctech/bootstrap_bux_gem. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the code of conduct.

License

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

Code of Conduct

Everyone interacting in the BootstrapBux project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the code of conduct.