Maro

A smarter Sass library

.box border-radius: 5px background: #ccc +size(800 400) margin: 0 auto

.box { border-radius: 5px; background: #ccc; width: 800px; height: 400px; margin: 0 auto; }

.header background: red +position(absolute, 0 20 n, 2) text-align: center

.header { background: red; position: absolute; top: 0; right: 20px; left: 20px; z-index: 2; text-align: center; }

h1 color: #4d4d4d +font(36 1.5 bold) margin-bottom: 20px

h1 { color: #4d4d4d; font-size: 36px; line-height: 1.5; font-weight: bold; margin-bottom: 20px; }

a color: #590 +hover color: black text-decoration: underline

a { color: #559900; } a:hover, a:focus { color: black; text-decoration: underline; }

Smarter than most

Maro is a collection of highly unopinionated functions, mixins and variables that don't force you to follow a specific coding style.

It does all the hard work for you, and it's smart enough to guess things for you, so you don't have to remember everything.

Meticulously animated

All the styles and animations of Maro's website are made entirely with Sass and Maro. The goal is to make the website with 0% JavaScript and zero images. The result is an entertaining and relaxed set of semi-abstract animations and interactions.

Coming Soon!

Concept

Development

Tests

Release