Organization of layout in rails application using rails_ui_kit gem

Where do you usually layout pages for subsequent integration with the 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 check various display options for layout elements using long text? I’ll try to briefly cover these issues by talking about the rails_ui_kit gem - a small tool for organizing layout in rails applications and how it had to be used to develop real production applications.

The idea to write this gem and use it in different projects came about 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 features of the gem:

  • The ability to typeset directly in the rails application stack, which provides great opportunities for working with templates, templates and other goodies (haml, sass, compass, coffeescript, etc.);
  • A list of all layout layouts 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, the gem has a minimal set of helpers , which most often have to be 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 by adding to your own.

As for the list of all layouts, files from app / views / ui are displayed as links by default. In one of the projects that we had to work on, we slightly modified this list, 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, you need to remember this, you can apply several methods for this, so in the gem 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 Konstantinopolsky);
  • helpers of various price values ​​(1000 RUB, 100 000 RUB, 1 000 000 RUB, 999 000 000 RUB);
  • lorem helper for breadcrumbs;
  • lorem value helper for 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 described features, I would like to note several advantages that this tool gave when 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 immediately;
  • It is convenient to look at the layout in a team in one application, for example, on a staging server;
  • Developers do not have to convert the layout from html anywhere 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 ready-made.

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

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

Also popular now: