Library Comparison

Comparisons are tough. Differences in problem space, constraints, values, trade-offs, and a whole bunch of other factors come into play that make a true comparison complicated.

Mdash hits the sweet spot of minimal trade-offs and maximum value by relentlessly leveraging standards and offers developers a UI library that is extremely small and compatible, truly easy (no install, no config, no build step), more familiar, and is sophisticated enough to serve as a shared design system across large organizations.

So, although not every UI library has all the same components, those that have matches with Mdash have their markup lined up below to compare.

Submit corrections

Bootstrapv4.572kb

M-v1.4.06kb

Container

Container (same loc, +9 chars)

Grid

Grid (same loc, -18 chars)

Accordion

Accordion (-10 loc, -874 chars)

Alert

Alert (-4 loc, -219 chars)

Badge

Badge (same loc, -13 chars)

Breadcrumb

Breadcrumb (same loc, -73 chars)

Card

Box (-2 loc, -66 chars)

Collapse

Details (a native element, same loc, -153 chars)

Modal

Dialog (-11 loc, -473 chars)

Form

Form (-2 loc, -306 chars)

Icon (installed separately)

Icon (-2 loc, -84 chars)

Tabs

• A
• B

Tabs (-4 loc, -376 chars

Material Webv7.080kb

M-v1.4.06kb

Grid

Grid (-2 loc, -338 chars)

Dialog

Title

Content

Dialog (-11 loc, -504 chars)

Removable Chip

Text cancel

Removable Tag (-12 loc, -465 chars)

free breakfast

Tabs

A B

Tabs (-22 loc, -1,159 chars)

Zurb Foundationv6.687kb

M-v1.4.06kb

Grid

Grid (same loc, -36 chars)

Reveal

Dialog (-3 loc, -192 chars)

Accordion

Accordion (-4 loc, -305 chars)

Dropdown

Menu (+2 loc, -22 chars)

Sticky

Sticky (-4 loc, -132 chars)

Tabs

Tabs (-8 loc, -377 chars)