Legacy Frontend HTML Patterns (Deprecated)

Note: This guide documents legacy HTML and CSS hooks still used in older ERB and Redmine-style views. For new UI, prefer the Design System and its documented Vue.js and Rails usage in Frontend Design System.

Scope

This page is not a source of new frontend standards. It exists to document legacy patterns that still appear in server-rendered views and older Easy8 screens.

Use these patterns when you are:

maintaining an existing ERB screen,
extending a page that already relies on legacy Easy styles,
fixing markup that depends on existing CSS hooks.

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.

EasyLabeledFormBuilder is still useful on legacy pages.
For new Design System-backed forms, prefer easy_form_for or easy_form_tag as described in Frontend 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 behavior.
class="inline" keeps a select compact.
class="block" forces full-width block behavior.

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 typically 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 keep in mind that they are part of the legacy Easy styling layer and do not map to Redmine defaults.

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.

Try to keep a page focused. Usually one main primary action is enough.

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 existing helper APIs when available, for example:

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>

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.