Legacy HTML patterns¶

Use this page only when you extend an existing ERB screen that already relies on legacy Easy styles and Redmine-style markup. For new screens, use the Design System (Design system).

Page zones¶

The legacy application shell splits the top area into:

main menu,
search area,
user menu,
"More" menu.

Service bar¶

The service bar holds widgets that must stay quickly accessible. Legacy widgets usually render a body with content and actions:

<div id="easy_servicebar_component_body">
  <div>Header comes here ...</div>
  <div class="servicebar-content">Content comes here ...</div>
  <div class="servicebar-actions">
    <a class="icon icon-add button-positive" href="#">Add item</a>
  </div>
</div>

Legacy page layouts use three main Rails content slots:

Primary actions:

content_for :easy_page_layout_service_box_primary_actions do

Service box:

content_for :easy_page_layout_service_box do

Remaining sidebar content:

content_for :sidebar do

Legacy forms¶

When you must build a legacy Rails form, prefer existing form builders over hand-written markup where possible.

EasyExtensions::EasyLabelledFormBuilder (used by labelled_form_for) is still useful on legacy pages.
For Design System-backed forms, use easy_form_for or easy_form_tag (Design system).

User inputs¶

Legacy Easy styles apply default styling to <input>, <textarea>, and <select>.

Inputs usually expand to available width.
size can override default width behaviour.
class="inline" keeps a select compact.
class="block" forces full-width block behaviour.

Checkboxes and radios¶

Place checkbox and radio inputs inside their labels and use the matching legacy classes:

<label class="checkbox">
  <input type="checkbox" />
  I am a checkbox
</label>

<label class="radio">
  <input type="radio" />
  I am a radio
</label>

Tabular layout¶

Legacy forms often use .tabular, inherited from Redmine. Labels are rendered to the left of the field and each row is typically wrapped in a separate paragraph.

<form class="tabular">
  <p>
    <label>Label</label>
    <input type="text" />
  </p>
  <p>
    <label>Label</label>
    <input type="text" />
  </p>
</form>

For grouped radios or checkboxes, keep the field label separate from individual option labels:

<form class="tabular">
  <p class="cols-2">
    <label class="radio">Label</label>
    <label class="radio">
      <input type="radio" />
      Option A
    </label>
    <label class="radio">
      <input type="radio" />
      Option B
    </label>
  </p>
</form>

cols-X can be used to distribute grouped options into columns, where X is usually in the 1..6 range.

Help block¶

Legacy field help is rendered as:

<em class="help">This is a helpful hint.</em>

Form actions¶

Visible legacy forms are often wrapped with class="form-box". Action bars usually use form-actions and buttons.

<form class="form-box">
  ... form content ...
  <p class="form-actions buttons">
    <a class="button-positive" href="#">Submit</a>
    <a class="button" href="#">Cancel</a>
  </p>
</form>

Legacy grid¶

Legacy layouts frequently use the Redmine-based splitcontent grid.

Basic two-column layout:

<div class="splitcontent">
  <div class="splitcontentleft"></div>
  <div class="splitcontentright"></div>
</div>

Uneven columns use size-* classes whose total width should not exceed 10:

<div class="splitcontent">
  <div class="splitcontentleft size-7"></div>
  <div class="splitcontentright size-3"></div>
</div>

Responsive variants such as size-s-*, size-l-*, and size-xl-* also exist, but they belong to the legacy Easy styling layer and do not exist in stock Redmine.

Other legacy UI patterns¶

Tables¶

Entity lists usually use the legacy list table class:

<table class="list">
  <thead>...</thead>
  <tbody>...</tbody>
</table>

Wrap wide tables in autoscroll when horizontal scrolling is expected:

<div class="autoscroll">
  <table class="list">...</table>
</div>

Buttons¶

Legacy button intent is expressed with classes:

button - default action,
button-positive - primary positive action,
button-important - destructive or high-attention action.

Size modifiers:

button-large,
default button size,
button-mini.

Keep one main primary action per page.

Modules¶

Legacy content boxes often use the module box structure:

<div class="module box">
  <div class="module-heading">
    <h3>Heading</h3>
    <div class="module-heading-links">... some actions ...</div>
  </div>
  <div class="module-content">... module content ...</div>
</div>

Prefer the existing helper:

render_module_easy_box(id, heading, options = {}, &block)

Tabs¶

Legacy tab markup:

<div class="tabs">
  <ul>
    <li><a href="/path-1">Tab 1</a></li>
    <li><a href="/path-2">Tab 2</a></li>
  </ul>
</div>

Tags¶

Use tags on a parent container holding links:

<div class="tags">
  <a href="#">Tag A</a>
  <a href="#">Tag B</a>
</div>

Alerts / flashes¶

Legacy notices build on Redmine flash markup:

<div class="flash notice">Notice ...</div>
<div class="flash warning">Warning ...</div>
<div class="flash error">Error ...</div>

Icons¶

Legacy icons are usually attached by adding class="icon icon-XXX" to an element.