Layouts

Instrumental Components comes with several layouts to serve as the "shell" for your application's views.

First and foremost, the layouts are designed to be clean, responsive, and easily adaptable to for the most common design patterns in Rails applications.

They're also highly modular, ensuring that global elements like your main navigation links, only need to be managed in one place and display across various layouts, pages, and device sizes.

Installation

As of this writing, this is the list of available layouts:

• Sidebar - A layout with a side navigation, top bar for breadcrumbs, and a main content area.
• Collapsible Sidebar - Similar to the sidebar layout, except it adds a toggle to "collapse" the sidebar.
• Sidebar Minimal - The same as the sidebar layout, but with a more minimal color palette.
• Stripped - A layout that has no sidebar or top bar. Just a main content area.

Use any of these commands to install a layout:

rails g instrumental:layout --sidebar

rails g instrumental:layout --collapsible_sidebar

rails g instrumental:layout --sidebar_minimal

rails g instrumental:layout --stripped

Layout Names

When you run the layout generator, it will ask you what you'd like to name your layout. Your options are:

• application - This will save (and overwrite) your app/views/layouts/application.html.erb file, making this layout your application's default layout.
• the provided name - (e.g. sidebar, collapsible_sidebar, sidebar_minimal, stripped)
• a custom name - Name your layout whatever you want.

The name of the layout will be used to name the file. For example, if you choose custom_name as your layout name, the file will be saved as app/views/layouts/custom_name.html.erb and you can apply this layout in any controller using:

layout "custom_name"

This will also create a folder in app/views/layouts/custom_name, which holds partials that are used specifically in this particular layout.

In addition, the first time you install a layout, the folder app/views/layouts/global will be created. This folder holds partials that are used across all layouts.

Page width

If a particular view needs to have a width that's wider or thinner than the default width for the layout, you can override it using this in your view:

<%= content_for :page_max_width, "max-w-5xl" %>

Placeholder comments

You might notice a few spots in various files that have comments like this:

<!-- PLACEHOLDER ... --> or # PLACEHOLDER ...

It is advised to leave these comments in place. A few generators such as the Teams generator, Commerce generator, and Admin generator will use these comments to insert bits of code into these spots.

For example, when you install the Authentication component, the User Menu gets installed at the top of your application's layout, which contains links for a user to edit their profile, logout, etc. Later, if you install the Teams component, it will add the account switcher and link to account settings into this User Menu.

Go deeper