From de4ada3b88d7514d0320540e5a298fbe878778e1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 01:45:15 -0800 Subject: [PATCH] spec out all mixins on less page --- docs/less.html | 356 ++++++++++++++++++++++++----- docs/templates/pages/less.mustache | 356 ++++++++++++++++++++++++----- 2 files changed, 606 insertions(+), 106 deletions(-) diff --git a/docs/less.html b/docs/less.html index ac75dd3469..e10c8899b0 100644 --- a/docs/less.html +++ b/docs/less.html @@ -105,11 +105,11 @@
-

Variables

+

Variables

Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though—assign colors or pixel values as variables and change them once.

-

Mixins

+

Mixins

Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.

@@ -395,62 +395,312 @@ -
-

Bootstrap mixins

-
- -

Mixins up the wazoo

-

Mixins are basically includes or partials for CSS, allowing you to combine a block of code into one. They’re great for vendor prefixed properties like box-shadow, cross-browser gradients, font stacks, and more. Below is a sample of the mixins that are included with Bootstrap.

-

Font stacks

+
+
+

Bootstrap mixins

+
+

About mixins

+
+
+

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.

-#font {
-  .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
-    font-size: @size;
-    font-weight: @weight;
-    line-height: @lineHeight;
-  }
-  .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-size: @size;
-    font-weight: @weight;
-    line-height: @lineHeight;
-  }
-  ...
-}
+  Coming soon!
-

Gradients

+
+
+

Parametric mixins

+

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

-#gradient {
-  ...
-  .vertical (@startColor: #555, @endColor: #333) {
-    background-color: @endColor;
-    background-repeat: repeat-x;
-    background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
-    background-image: -moz-linear-gradient(@startColor, @endColor); // FF 3.6+
-    background-image: -ms-linear-gradient(@startColor, @endColor); // IE10
-    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
-    background-image: -webkit-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+
-    background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10
-    background-image: linear-gradient(@startColor, @endColor); // The standard
-  }
-  ...
-}
+  Coming soon!
+
+
+

Easily add your own

+

Nearly all of Bootstrap's mixins are stored in mixins.less, a wonderful utility .less file that enables you to use a mixin in any of the .less files in the toolkit.

+

So, go ahead and use the existing ones or feel free to add your own as you need.

+
+
+

Included mixins

+

Utilities

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MixinParamatersUsage
.clearfix()
.center-block()
.ie7-inline-block()
.size()
.square()
.opacity()
.reset-filter()
+

Forms

+ + + + + + + + + + + + + + + +
MixinParamatersUsage
.placeholder()
+

Typography

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MixinParamatersUsage
#font > #family > .serif()
#font > #family > .sans-serif()
#font > #family > .monospace()
#font > .shorthand()
#font > .serif()
#font > .sans-serif()
#font > .monospace()
+

Grid system

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MixinParamatersUsage
.fixed-container()
.columns()
.offset()
.gridColumn()
+

CSS3 properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MixinParamatersUsage
.border-radius()
.border-radius-custom()
.box-shadow()
.transition()
.rotate()
.scale()
.translate()
.background-clip()
.background-size()
.box-sizing()
.user-select()
.resizable()
.content-columns()
+

Backgrounds and gradients

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MixinParamatersUsage
.#translucent > .background()
.#translucent > .border()
.#gradient > .vertical()
.#gradient > .horizontal()
.#gradient > .directional()
.#gradient > .vertical-three-colors()
.#gradient > .radial()
.#gradient > .striped()
.#gradientBar()
+
-

Operations

-

Get fancy and perform some math to generate flexible and powerful mixins like the one below.

-
-// Griditude
-@gridColumns:       16;
-@gridColumnWidth:   40px;
-@gridGutterWidth:   20px;
-@siteWidth:         (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
-
-// Make some columns
-.columns(@columnSpan: 1) {
-  width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
-}
-
-
-

{{_i}}Bootstrap mixins {{/i}}

-
- -

{{_i}}Mixins up the wazoo{{/i}}

-

{{_i}}Mixins are basically includes or partials for CSS, allowing you to combine a block of code into one. They’re great for vendor prefixed properties like box-shadow, cross-browser gradients, font stacks, and more. Below is a sample of the mixins that are included with Bootstrap.{{/i}}

-

{{_i}}Font stacks{{/i}}

+
+
+

{{_i}}Bootstrap mixins {{/i}}

+
+

About mixins

+
+
+

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.

-#font {
-  .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
-    font-size: @size;
-    font-weight: @weight;
-    line-height: @lineHeight;
-  }
-  .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-size: @size;
-    font-weight: @weight;
-    line-height: @lineHeight;
-  }
-  ...
-}
+  Coming soon!
-

{{_i}}Gradients{{/i}}

+
+
+

Parametric mixins

+

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

-#gradient {
-  ...
-  .vertical (@startColor: #555, @endColor: #333) {
-    background-color: @endColor;
-    background-repeat: repeat-x;
-    background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
-    background-image: -moz-linear-gradient(@startColor, @endColor); // FF 3.6+
-    background-image: -ms-linear-gradient(@startColor, @endColor); // IE10
-    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
-    background-image: -webkit-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+
-    background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10
-    background-image: linear-gradient(@startColor, @endColor); // The standard
-  }
-  ...
-}
+  Coming soon!
+
+
+

Easily add your own

+

Nearly all of Bootstrap's mixins are stored in mixins.less, a wonderful utility .less file that enables you to use a mixin in any of the .less files in the toolkit.

+

So, go ahead and use the existing ones or feel free to add your own as you need.

+
+
+

Included mixins

+

Utilities

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MixinParamatersUsage
.clearfix()
.center-block()
.ie7-inline-block()
.size()
.square()
.opacity()
.reset-filter()
+

Forms

+ + + + + + + + + + + + + + + +
MixinParamatersUsage
.placeholder()
+

Typography

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MixinParamatersUsage
#font > #family > .serif()
#font > #family > .sans-serif()
#font > #family > .monospace()
#font > .shorthand()
#font > .serif()
#font > .sans-serif()
#font > .monospace()
+

Grid system

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MixinParamatersUsage
.fixed-container()
.columns()
.offset()
.gridColumn()
+

CSS3 properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MixinParamatersUsage
.border-radius()
.border-radius-custom()
.box-shadow()
.transition()
.rotate()
.scale()
.translate()
.background-clip()
.background-size()
.box-sizing()
.user-select()
.resizable()
.content-columns()
+

Backgrounds and gradients

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MixinParamatersUsage
.#translucent > .background()
.#translucent > .border()
.#gradient > .vertical()
.#gradient > .horizontal()
.#gradient > .directional()
.#gradient > .vertical-three-colors()
.#gradient > .radial()
.#gradient > .striped()
.#gradientBar()
+
-

{{_i}}Operations{{/i}}

-

{{_i}}Get fancy and perform some math to generate flexible and powerful mixins like the one below.{{/i}}

-
-// Griditude
-@gridColumns:       16;
-@gridColumnWidth:   40px;
-@gridGutterWidth:   20px;
-@siteWidth:         (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
-
-// Make some columns
-.columns(@columnSpan: 1) {
-  width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
-}
-