Morphy.css showcase

This page is meant to be a showcase of what Morphy.css is capable of, both in terms of the built-in widgets it provides, and UIs that you can build with it.

Built-in components

Progress bars

Right now, Morphy.css doesn't support indeterminate progress bars.

Preformatted text

(The syntax highlighting is provided by Pygments, not Morphy.css.)

def calc_frequency(l):
    freqs = {}
    for num in l:
        freqs[num] = freqs.get(num, 0) + 1
    return freqs
			

Tables

Bigger examples

These are some examples of using the Morphy.css mixin classes in conjuction with its styled HTML widgets.

Clock

This clock is made with two nested div elements, the outer using the mc-raised-large class, and the inner using the mc-lowered class. This gives the illusion of a raised surface with a slight indent inside it.

Music player

The same trick as with the clock is used for the album art, and the buttons use Unicode characters.

blink-182
Greatest Hits
All The Small Things

❚◀ ▮▮ ▶ ▶❚

0:49 2:51

Chat window