At Power, we have a suite of applications that provide a wealth of functionality to our users, many of which were broken out from our monolith. We want all of these applications to have the same look and feel and cohesive experience. While we rely on playbook for specific components, we want to put some of these components and other pieces together to give us a framework for the general layout and functionality for a top menu, sidebar, and other components that are likely to be consistently framing every page of the monolith. We also want to provide some injectable containers so that applications can magically add their own functionality into this frame if they would like to do so.
Rabbet is a convenient place to store these shared pieces and configure them based on the needs of the individual application.
- Add the gem to your gemfile and bundle.
gem "rabbet"
- Require the gem
# lib/my_cool_app.rb or application.rb
require "rabbet"- Add the styles to your application.
# application.scss
@import "rabbet";- Include the view helpers to help with injection
# application_helper.rb
include Rabbet::Views::HelpersYou can find a list of available pieces in app/views/rabbet. If, for example, you'd like to add the topbar to your application, you can view the injectible pieces in that specific file. In topbar, pieces that are injectible include:
logoheadernavigation_right
In our example we'll add the topbar, but we only want to inject the logo into our app. We would do so like so:
<% content_for :logo do %>
<%= image_tag("path_to/logo_image/here.png") %>
<% end %>
<%= render partial: "rabbet/topbar" %>
By default, the color for the topbar will be the blue that Power's monolith uses. This is configurable, however, by passing in your chosen color as a local variable:
<%= render partial: "rabbet/topbar",
locals: { bg_color: "#282634"} %>