Use Less Mixins to Simplify Styling

Appkit provides a number of helper mixins for simplifying the application of cross-browser styles, including rounded corners, shadows, gradients, opacity, and float clearing.

  • Rounded corners.rounded-corners(@radius) .rounded-corners(@top-left-radius, @top-right-radius [, @bottom-right-radius, @bottom-left-radius])

  • Shadows.inner-shadow(@x, @y, @feather, @color) .drop-shadow(@x, @y, @feather, @color) .no-shadow()

  • Gradients.gradient(@start-color, @end-color)

  • Opacity.opacity(@opacity)

  • Clear floating elements.clearfix()

Rounded corners

There are two ways to use the .rounded-corners() mixin to achieve a border radius (see the W3C CSS Backgrounds and Borders Module specification): provide a single parameter to round all four corners equally, or provide up to four parameters to apply a unique border radius to each corner, starting from the top left corner and proceeding clockwise to end at the bottom left corner.

.rounded-corners(@radius)
Rounds all four corners of an element equally.

  • @radius – The radius for the rounded corners.
    Default: 6px

To apply a 6 pixel border radius to a list item with a class of capsule, for example, you could apply this the rule:

li.capsule {
    .rounded-corners();
}

The above Less rule would compile to this CSS:

li.capsule {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.rounded-corners(@top-left-radius, @top-right-radius [, @bottom-right-radius, @bottom-left-radius])
Rounds the four corners of an element individually.

  • @top-left-radius – The radius for the top left corner.
    Default: 0

  • @top-right-radius – The radius for the top right corner.
    Default: 0

  • @bottom-right-radius – The radius for the bottom right corner.
    Default: 0

  • @bottom-left-radius – The radius for the bottom left corner.
    Default: 0

To round only the left corners of an element without altering the right corners, you could apply this:

input.query {
    .rounded-corners(6px,0,0,6px);
}

The above Less rule would compile to this CSS:

li.capsule {
    -webkit-border-radius: 6px 0 0 6px;
    -moz-border-radius: 6px 0 0 6px;
    border-radius: 6px 0 0 6px;
}

Shadows

There are two helper mixins for applying box shadows (see the W3C CSS Backgrounds and Borders Module specification) — .inner-shadow() and .drop-shadow() for applying interior versus exterior shadows, respectively — as well as two helper mixins for clearing any previously applied shadows — .inner-shadow-none() and .drop-shadow-none.

A given element can only have one type of shadow at a time; for example, it’s not possible to have both an inner shadow and a drop shadow simultaneously. Box shadows are not supported in Internet Explorer 8 or below.

.inner-shadow(@x, @y, @feather, @color)
Applies an inner shadow.

  • @x – The horizontal offset for the shadow.
    Default: 0px

  • @y – The vertical offset for the shadow.
    Default: 1px

  • @feather – The blur level for the shadow.
    Default: 1px

  • @color – The color of the shadow.
    Default: #fff

To add a top inner shadow when the user focuses on the search box, for example, you could apply this:

input.query:focus {
    .inner-shadow(0,3px,4px,#666);
}

The above Less rule would compile to this CSS:

input.query:focus {
    -webkit-box-shadow: inset 0 3px 4px #666;
    -moz-box-shadow: inset 0 3px 4px #666;
    box-shadow: inset 0 3px 4px #666;
}

.drop-shadow(@x, @y, @feather, @color)
Applies an outer shadow.

  • @x – The horizontal offset for the shadow.
    Default: 0px

  • @y – The vertical offset for the shadow.
    Default: 1px

  • @feather – The blur level for the shadow.
    Default: 1px

  • @color – The color of the shadow.
    Default: #fff

To add a light 1 pixel drop shadow beneath the search box, for example, you could apply this:

input.query:focus {
    .drop-shadow(0,1px,0,rgba(255,255,255,0.175);
}

The above Less rule would compile to this CSS:

input.query:focus {
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.175);
    -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.175);
    box-shadow: 0 1px 0 rgba(255,255,255,0.175);
}

The RGBA format stands for red, green, blue, alpha. See the W3C CSS Color Module specification.

.no-shadow()
Removes any previously-applied shadow.
This mixin doesn’t accept any parameters.

For example:

input.query:focus {
    .no-shadow();
}

Would compile to:

input.query:focus {
    -webkit-box-shadow: 0 0 0 rgba(255,255,255,0);
    -moz-box-shadow: 0 0 0 rgba(255,255,255,0);
    box-shadow: 0 0 0 rgba(255,255,255,0);
}

Gradients

The .gradient() mixin accepts two color values and paints the background of the target element to a gradient between those two colors (see the information about linear gradients in the W3C CSS Image Values and Replaced Content Module specification). Unlike rounded corners and shadows, gradients are mostly supported in Internet Explorer 6 and above.

.gradient(@start-color, @end-color)
Applies a background gradient.

  • @start-color – The initial color that will be positioned at the top of the gradient.
    Default: #ffffff

  • @end-color – The terminal color that will be positioned at the bottom of the gradient.
    Default: #000000

To add a gradient from white to black, for example, you could apply this:

li.capsule {
    .gradient(#ffffff,#000000);
}

The .gradient() mixin would then applying this Less:

li.capsule {
    background: ((@start-color + @end-color) / 2); // find the average of the two colors and sets that as the background-color as a fallback for browsers that don't support gradients.
    background: -webkit-gradient(linear, left top, left bottom, from(@start-color), to(@end-color)); // Webkit
    background: -moz-linear-gradient(@start-color, @end-color); // FireFox
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d)", @start-color, @end-color)); // IE6-7
    -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d)", @start-color, @end-color); // IE8+
    zoom: 1; // For IE6-7
}

Which is then compiled to this CSS:

li.capsule {
 background: #808080;
 background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#000000));
 background: -moz-linear-gradient(#ffffff, #000000);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#000000);
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#000000)";
 background-image:/assets/images/appkit/latest/ linear-gradient(#ffffff, #000000);
 zoom: 1;

}

Opacity

Opacity adjusts the transparency of an element (not just the background color, but the element as a whole). Opacity is supported by virtually all browsers, including Internet Explorer 6+.

.opacity(@opacity)
Set the transparency of an element.

  • @opacity – A 0-100 range of transparency, with 0 being fully translucent (that is, invisible) and 100 being fully opaque.
    Default: 100

Here is how you would set the opacity of an element to 50%:

a.button {
    .opacity(50);
}

The above Less rule would compile to this CSS:

a.button {
    opacity: 50;
    filter: alpha(opacity=50);
    zoom: 1;
}

One of the few browser situations which this mixin does not address is when Internet Explorer 8 is in "Internet Explorer 7 Compatibility Mode" (see Quirksmode), but that case can be avoided by setting the X-UA-Compatible meta tag to content="IE=edge" (see MSDN).

Clearing floating elements

Layouts are often achieved by floating specific elements right of left (see the W3C CSS Positioned Layout Module specification); it is then necessary to clear the float for the surrounding container to occupy the correct amount of space on the page (see Clearing floats on Quirksmode for a synopsis of the problem). There are numerous ways to clear floating elements, such as the clear: both; property and setting overflow: hidden; on the parent. The most recent and unobtrusive method, however, is typically named the micro clearfix, and has been documented by Nicolas Gallagher. The result is that calling the .clearfix() mixin on a container clears any floats of its children.

.clearfix() Clears floating elements within a container.
This mixin does not accept any parameters.

For example, invoking .clearfix() on a ul selector, such as:

ul {
    .clearfix();
}

Would result in this compiled CSS:

ul {
    zoom:1;
}
ul:before, ul:after {
    content: "";
    display: table;
}
ul:after {
    clear: both;
}