Layout organization in rails application using rails_ui_kit gem

Where do you usually design pages for integration with rails application? In a separate repository with html files or immediately in rails - in some special place? Do you test layout with long words and texts? Do you test various options for displaying layout elements with long text? I will try to briefly highlight these issues, talking about the rails_ui_kit gem - a small tool for organizing layout in rails applications and how it had to be used in developing real-world production applications.

The idea to write this gem and use it in different projects arose after reading several posts from the hashrocket blog ( "Managing Design Handoffs with the UI Controller" , "The UI Controller, part 2: Faking It" , "The UI Controller, part 3: the UI Helper ” ).

Briefly about the possibilities of heme:

• Possibility of typesetting immediately in the rails stack of the application, which provides great opportunities for working with templates, templates and other goodies (haml, sass, compass, coffeescript, etc.);
• The list of all layouts of the layout is displayed on a separate page, each layout also has its own separate page;
• There is a set of helpers for use in layout as content placeholders (various lorem-helpers).

At the moment, heme has a minimum set of helpers , which are most often used in almost every project. Read more about these helpers on the hashrocket blog. You can add the necessary helpers yourself by expanding the UiHelper module, or adding your own to another.
')
As for the list of all layouts, by default, files from app / views / ui are displayed as links. In one of the projects that we had to work on, we modified this list slightly, making it into categories in order to simplify navigation through a large number of layouts. Access to the list of layouts is not closed by default, this must be remembered , for this you can use several methods, so in the game it is left to the taste of the developer.

As an addition, I will give examples of additional helpers that we used in one of the projects:

• helper with a long username (Konstantin Konstantinovich Constantinople);
• helpers of price values ​​of various lengths (1000 RUB, 100,000 RUB, 1,000,000 RUB, 999,000,000 RUB);
• lorem-helper for bread crumbs;
• lorem-helper values ​​for the select tag.

In general, you can come up with many different helpers, it all depends on the project and the frequency of their use.

In addition to the features described, I would like to mention a few advantages that this tool has given in developing real production-applications:

• Layout is almost always relevant, as it is not divorced from the project. When correcting any shortcomings, both the layout and the real page with this layout are relevant at once;
• It is convenient to watch the layout in a team in one application, for example on a staging server;
• Developers do not have to convert the layout from html somewhere else. In most cases, the layout code only needs to be copied and filled with real data, which saves time;
• All assets in the project are in a single copy immediately in finished form.

I would be glad if the rails_uit_kit gem will interest you and come in handy. I will also be happy to receive feedback and ideas for improving the heme.

The repository page is github.com/puffy/rails_ui_kit , here it is written in detail about usage.