Base

Normalize

The Mercury UI Framework uses the latest version of Normalize (currently 5.0.0). Normalize corrects bugs and common browser inconsistencies.

Margins

We're setting global margin via the lobotomized owls selector, written about by A List Apart. This provides nice default spacing for elements, especially type elements edited by a CMS.

You can turn margin off by using the margin--off class on the parent element. You can also turn margin off at breakpoints from margin--off--xxs through margin--off--xxl.

* {
    margin: 0;
}

* + * {
    margin-top: $spacer;
}

HTML

We're setting global box-sizing the way CSS-Tricks recommends. The other important note here is this is where we are setting the root font-size — by changing this one setting, you can change the size of most elements, all at once, on the site.

html {
    box-sizing: border-box;
    font-family: sans-serif;
    font-size: $font-size--root;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: rgba($black,0);
}

* {
    box-sizing: inherit;

    &:before, &:after {
        box-sizing: inherit;
    }
}

Body

On the body tag, we're removing margin, providing better scrolling for iOS via -webkit-overflow-scrolling. We're also setting some font and color defaults.

body {
    font-family: $font-family--primary;
    font-size: $font-size--base;
    line-height: $line-height--base;
    color: $default-color;
    background-color: $default-body-background-color;
    margin: 0;
    -webkit-overflow-scrolling: touch;
}

Images

Images are responsive by default.

Links

A sample link.

You can make new link styling easily by using the link mixin: @include link($link-color, $link-visited-color, $link-hover-color, $link-active-color).

<p><a href="#" title="A sample link">A sample link</a>.</p>

Colors

Grays

Brand Colors

State Colors