Apply various types of grid systems using simple modifiers. Easily create traditional grids, or transform them into a table or flex based grid system. The layout class library modifies the positioning and clearing of content.
<div class="l-row -flex u-space-child-medium"></div>
The Single component library provides Buttons and labels in various colors and sizes. Easily create sharp, rounded or broadened buttons. You can also create thumbnail components for a variety of media object uses.
<button class="s-button -green -broad -round"></button>
Scale your typography based on a modular scale ratio system. Melody also adopts the vertical rhythem system to ensure every element is aligned appropriate to the typographic baseline. These ratios are also reusable with built in scale variables.
<h1 class="s-head -semi-bold -relaxed"></h1>
Wether you require the classic media object, tables or lists, the module library provides various components to help you quickly get started. Every module comes with built in modifying options but you can also easily expand and customize each module to suit your project.
<div class="m-table -fluid"></div>