A Lightweight CSS Framework

Melody is a simple and yet flexible css system that features expressive syntax and modular components to get your project up and started the right way.

Download Read Documentation
1. Layouts

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>
2. Singles

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>
3. Typography

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>

Light Typography

Regular Typography

Semi-Bold Typography

Bold Typography

4. Modules

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>
One One One One
One One One One
One One One One
One One One One