mdoml

What if you could augment HTML5’s current set of elements with your own? Well, as it turns out, you can. mdoml is an experiment in creating custom HTML elements based on today’s most common interface design components.

Is this a bad idea? Maybe, but that depends on how you look at it. Sure, it doesn’t validate, but it does create a more approachable component-based design system. No more rules around writing classes a certain way—just create the components.

Learn more, suggest changes, or report bugs via the GitHub repo.


Contents


Things to know


Form groups

The custom <formgroup> element automatically aligns immediate <label>s and their <input>s to create hanging checkboxes or radios. Text wrapping, stacking of inputs (without adding display: block), and alignment comes automatically.

<formgroup>
  <label for="radio1">
    <input type="radio" id="radio1" name="radios" checked>
    Radio input
  </label>
  <label for="radio2">
    <input type="radio" id="radio2" name="radios">
    Another radio input
  </label>
</formgroup>
<formgroup>
  <label for="checkbox1">
    <input type="checkbox" id="checkbox1" checked>
    Checkbox input
  </label>
  <label for="checkbox2">
    <input type="checkbox" id="checkbox2">
    Checkbox input with a super long string of text that can wrap to a second line to show the hanging input.
  </label>
</formgroup>

Grids

Uses custom <row>s and <column>s to create a basic grid layout. Columns are then sized with a cols attribute.

Note that not all possible column combinations are used here. I’ve purposely avoided adding 1, 5, 7, and 11 as they seem rather uncommon.

2 2 2 2 2 2 3 3 3 3 4 4 4 6 6 8 4 9 3 10 2
<row>
  <column cols="4">4</column>
  <column cols="4">4</column>
  <column cols="4">4</column>
</row>

Alerts

Use custom <alert>s as messages for warnings, errors, status confirmation, and the like.

This is an alert with some text in it.

This is an alert with some text in it.

This is an alert with some text in it.

This is an alert with some text in it.

<alert role="alert">...</alert>
<alert is="info" role="alert">...</alert>
<alert is="warning" role="alert">...</alert>
<alert is="danger" role="alert">...</alert>

Contextual menus for buttons and more. Built with a custom <dropdown> element and several <button> elements as the dropdown actions. Using <button>s gives us incredibly ease of use for disabled, hover, and active states.



<button type="button" id="dropdown-toggle" active>
  Dropdown button
</button>
<dropdown role="menu" aria-labelledby="dropdown-toggle">
  <button type="button" disabled>Cut</button>
  <button type="button" disabled>Copy</button>
  <button type="button">Paste</button>
  <hr>
  <button type="button">Spelling and Grammar...</button>
  <hr>
  <button type="button">Inspect Element</button>
</dropdown>

The contents of a <dropdown> could also be customized to include things other than pure <button> actions:



<dropdown role="menu" aria-labelledby="dropdown-toggle">
  <form>
    <input type="text" placeholder="Search">
  </form>
  <hr>
  <button type="button">United States of America</button>
  <button type="button">United Kingdom</button>
  <hr>
  <button type="button">Canada</button>
  <button type="button">France</button>
  <button type="button">India</button>
  <button type="button">Mexico</button>
</dropdown>

Combo buttons

Use a custom <combo-button> to tether a series of related buttons. This relies on us resetting nearly all the default <button> styles, but the controls afforded via disabled, hover, and active states is quite compelling—and easy to style.

<combo-button role="group" aria-label="Combo button">
  <button type="button">Button</button>
  <button type="button">Button</button>
</combo-button>
<combo-button role="group" aria-label="Combo button with disabled button">
  <button type="button" disabled>Disabled</button>
  <button type="button">Button</button>
  <button type="button" active>Active</button>
</combo-button>

Use the custom <breadcrumb> element to show the current path to a particular page. Structurally, it’s quite familiar to <nav> elements. Theoretically, its contents could be generated based on the page’s URL structure or something similar.

Home Subfolder Subfolder Page
<breadcrumb>
  <a href="#">Home</a>
  <a href="#">Subfolder</a>
  <a href="#">Subfolder</a>
  <a>Page</a>
</breadcrumb>

Does it work?

Yes, but beyond that I’m not sure where to take something like this. I’m super intrigued and I could totally see myself building things this way in the future. Something about it feels right. Performance is probably a concern though, at least compared to a pure class-driven system (e.g., .dropdown over <dropdown>).

My ultimate goal for things like this—and popular front-end frameworks—is that these kind of ideas could influence the future changes to the HTML and CSS specs. That sounds a bit lofty, but one never knows.