Styleguide

Every component in assets/css/malyomar.css. Pages are assembled from these classes only, so the public site, back office and portals look like one product.

Seats sold, next 30 days
92
+14 vs previous 30 days
Open pipeline
23 deals
Batches at risk
1
ML510 below break-even
Certificates issued
318
this year

Table with toolbar

Sample data
BatchCourseStartsInstructorSeatsFillStatus
Showing 8 of 8

Tabs, forms, steps

Published EnglishArabic
  1. LeadWeb form
  2. QualifiedScored 78
  3. ProposalSent 28 Sep
  4. Enrolled
  5. Completed
  6. Certified
May
Jun
Jul
Aug
Sep
Oct
Piping Engineering
78%
Asset Integrity
52%
Value Engineering
31%

Kanban

New 2
Sample EPC ContractorsML516 private batch, 15 seats
EGP 300,000Score 82
Sample RefiningFFS, 8 seats
Proposal 1
Sample Gas PipelinesPD370 in-house
Won 1
Sample Petrochem Co.B31.3 team programme

Calendar

Sun
Mon
Tue
Wed
Thu
Fri
Sat
23
24

Tags and badges

ML513PD643B-2611

Line tags carry course codes. Teal band is a MALYOMAR program, amber band is an ASME authorized program.

ConfirmedOpenAt riskOverdueDraftArchivedAI suggestion

Activity

  • Karim sent proposal P-0142 to Sample EPC Contractors
  • Invoice INV-2071 paid by bank transfer
  • Aya Mostafa completed ML513 and received a certificate

Details list

Learner
AM Aya Mostafa
Company
Sample Petrochem Co.
Progress
Plain note for guidance.
Warning: prices 600 and 28,571 in the export look like a different currency.
AI note: 5 open leads match this batch.

Revision components

Added for revision 5 Oct 2026. Each example is live; the markup or helper call that produces it is shown beside it. Helpers are defined in assets/js/shell.js. Pink is reserved for “changed in this revision”.

Change markers

Attributes only; the shell draws the highlight and the navigator at the bottom right
A block that was added. The label shows the type and the requirement.
<div class="note" data-chg="new" data-req="REQ-004"
     data-note="Example of a new block">…</div>
RecordStatus
Unchanged rowOpen
Updated rowIn close
<tr data-chg="upd" data-req="REQ-009">…</tr>
Balance: EGP 75,240
<span data-chg="fix" data-req="FIN-02"
      data-was="EGP 150,000">EGP 75,240</span>
new = added, upd = modified, fix = a wrong or conflicting value or rule corrected; data-was keeps the old value on show. Never put data-chg on a modal or drawer itself.
data-req: REQ-001…REQ-010, FIN-01…FIN-09, DEC-01…DEC-10
          (space-separated when several)

Page banner and sidebar pills

Rendered by the shell from the body attributes and the change registry
New pageRevision 5 Oct 2026One line: what this page demonstrates.
<body data-shell="admin" data-rev="new" data-req="REQ-007"
      data-rev-note="One line: what this page demonstrates">
Updated pageRevision 5 Oct 2026Changed parts are outlined in pink.
<body data-shell="admin" data-rev="upd" data-req="REQ-009 FIN-01">
Finance 5Company P&L NewOverview Upd
<i class="rev-count">5</i>
<i class="rev-pill new">New</i>  <i class="rev-pill upd">Upd</i>
(generated from MY.CHANGES; never hand-written)

What kind of number

MY.kind('actual' | 'target' | 'plan' | 'forecast' |
        'commitment' | 'estimate' | 'illustrative'[, text])
MY.def(label, definition)   // hover or focus the label
MY.pct(60, 100)   MY.pct(5, 0)   MY.pct(1, 3, 2)
// a zero denominator shows "not applicable" and the values
MY.m(-1200000)   MY.money(75240)
MY.fmtDate('2026-10-25')   MY.fmtDate('2026-10-25', true)
MY.days('2026-10-03', '2026-10-25')   MY.overdueDays('2026-09-26')
// always measured against MY.asOf

Chips and record links

MY.prov('DEC-03')   MY.prov('DEC-06', 'Proposed definition')
// links to blueprint/decisions.html#DEC-03
MY.sim()   MY.sim('Simulated publish')
MY.req('REQ-005')   MY.req('FIN-01')
// links to blueprint/changes.html#REQ-005
MY.link('B-2614')  MY.link('TND-0007')  MY.link('RSK-0042')
MY.link('E-013')  MY.link('BILL-0052')  MY.link('a1', 'Account a1')
MY.personName('E-003')   MY.company('a1')

Standard AI card

Every AI proposal states inputs, assumptions, missing information, expected effect and who decides
MY.aiBox({
  title: 'Draft: follow-up for the stalled quotation',
  body: '<p>…</p>',
  inputs: ['…'], assumptions: ['…'],
  missing: ['…'], effects: ['…'],
  approver: 'Account owner',
  actions: '<button class="btn sm primary"
    data-toast="Prototype: …">Use draft</button>'
})

Bridge table

Summary to detail, every difference named
table.tbl.bridge with tr.sub, tr.diff, tr.total. The total row is summed from the rows in JavaScript, never typed.

Approval text from the one policy

MY.approvalNote('refund')
MY.approvalTable(['refund', 'purchase'])
// new approval types have no monetary default

Public-site surfaces

Build engineers who can make decisions.

The isometric grid is used once per public page: on the hero or banner.

Explore learning pathsDevelop your team
ML523ML513ML514ML501ML510ML530