From b6b7d1343b74713a60e86401d8b625f097a7b8dc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 15:03:44 -0800 Subject: finish the rest of the less page mixins docs --- docs/less.html | 147 ++++++++++++++++++++++++++++----------------------------- 1 file changed, 73 insertions(+), 74 deletions(-) (limited to 'docs/less.html') diff --git a/docs/less.html b/docs/less.html index 23c2c53c6..f6321fc69 100644 --- a/docs/less.html +++ b/docs/less.html @@ -406,14 +406,18 @@

Basic mixins

A basic mixin is essentially an include or a partial for a snippet of CSS. They're written just like a CSS class and can be called anywhere.

-  Coming soon!
+.element {
+  .clearfix();
+}

Parametric mixins

-

A parametric mixin is just like a basic mixin, but it also accepts optional Parameters (hence the name).

+

A parametric mixin is just like a basic mixin, but it also accepts parameters (hence the name) with optional default values.

-  Coming soon!
+.element {
+  .border-radius(4px);
+}
@@ -499,38 +503,38 @@ #font > #family > .serif() - - + none + Make an element use a serif font stack #font > #family > .sans-serif() - - + none + Make an element use a sans-serif font stack #font > #family > .monospace() - - + none + Make an element use a monospace font stack #font > .shorthand() - - + @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight + Easily set font size, weight, and leading #font > .serif() - - + @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight + Set font family to serif, and control size, weight, and leading #font > .sans-serif() - - + @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight + Set font family to sans-serif, and control size, weight, and leading #font > .monospace() - - + @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight + Set font family to monospace, and control size, weight, and leading @@ -545,24 +549,24 @@ - .fixed-container() - - + .container-fixed() + none + Provide a fixed-width (set with @siteWidth) container for holding your content .columns() - - + @columns: 1 + Build a grid column that spans any number of columns (defaults to 1 column) .offset() - - + @columns: 1 + Offset a grid column with left margin that spans any number of columns .gridColumn() - - + none + Make an element float like a grid column @@ -570,7 +574,7 @@ - + @@ -578,68 +582,63 @@ - - - - - - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + +
MixinMixin Parameters Usage
.border-radius()
.border-radius-custom()@radius: 5pxRound the corners of an element. Can be a single value or four space-separated values
.box-shadow()@shadow: 0 1px 3px rgba(0,0,0,.25)Add a drop shadow to an element
.transition()@transitionAdd CSS3 transition effect (e.g., all .2s linear)
.rotate()@degreesRotate an element n degrees
.scale()@ratioScale an element to n times it's original size
.translate()@x: 0, @y: 0Move an element on the x and y planes
.background-clip()@clipCrop the backgroud of an element (useful for border-radius)
.background-size()@sizeControl the size of background images via CSS3
.box-sizing()@boxmodelChange the box model for an element (e.g., border-box for a full-width input)
.user-select()@selectControl cursor selection of text on a page
.resizable()@direction: bothMake any element resizable on the right and bottom
.content-columns()@columnCount, @columnGap: @gridColumnGutterMake the content of any element use CSS3 columns
@@ -655,48 +654,48 @@ .#translucent > .background() - - + @color: @white, @alpha: 1 + Give an element a translucent background color .#translucent > .border() - - + @color: @white, @alpha: 1 + Give an element a translucent border color .#gradient > .vertical() - - + @startColor, @endColor + Create a cross-browser vertical background gradient .#gradient > .horizontal() - - + @startColor, @endColor + Create a cross-browser horizontal background gradient .#gradient > .directional() - - + @startColor, @endColor, @deg + Create a cross-browser directional background gradient .#gradient > .vertical-three-colors() - - + @startColor, @midColor, @colorStop, @endColor + Create a cross-browser three-color background gradient .#gradient > .radial() - - + @innerColor, @outerColor + Create a cross-browser radial background gradient .#gradient > .striped() - - + @color, @angle + Create a cross-browser striped background gradient .#gradientBar() - - + @primaryColor, @secondaryColor + Used for buttons to assign a gradient and slightly darker border -- cgit v1.2.3