From b6b7d1343b74713a60e86401d8b625f097a7b8dc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 15:03:44 -0800 Subject: [PATCH] finish the rest of the less page mixins docs --- docs/less.html | 147 ++++++++------- docs/scaffolding.html | 2 +- docs/templates/pages/less.mustache | 217 +++++++++++----------- docs/templates/pages/scaffolding.mustache | 2 +- lib/mixins.less | 35 +--- lib/scaffolding.less | 2 +- 6 files changed, 193 insertions(+), 212 deletions(-) diff --git a/docs/less.html b/docs/less.html index 23c2c53c65..f6321fc69b 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 diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 8245f860cc..2ba8d5d7ad 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -212,7 +212,7 @@ @siteWidth Computed sum of all columns and gutters - Counts number of columns and gutters to set width of the .fixed-container() mixin + Counts number of columns and gutters to set width of the .container-fixed() mixin diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache index 51d2295def..f2c2668421 100644 --- a/docs/templates/pages/less.mustache +++ b/docs/templates/pages/less.mustache @@ -270,7 +270,7 @@
-

Form states and alerts

+

{{_i}}Form states and alerts{{/i}}

@@ -336,73 +336,77 @@

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

-

About mixins

+

{{_i}}About mixins{{/i}}

-

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.

+

{{_i}}Basic mixins{{/i}}

+

{{_i}}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.{{/i}}

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

Parametric mixins

-

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

+

{{_i}}Parametric mixins{{/i}}

+

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

-  Coming soon!
+.element {
+  .border-radius(4px);
+}
-

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.

+

{{_i}}Easily add your own{{/i}}

+

{{_i}}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.{{/i}}

+

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

-

Included mixins

-

Utilities

+

{{_i}}Included mixins{{/i}}

+

{{_i}}Utilities{{/i}}

- - - + + + - + - + - + - + - + - + - +
MixinParametersUsage{{_i}}Mixin{{/i}}{{_i}}Parameters{{/i}}{{_i}}Usage{{/i}}
.clearfix() noneAdd to any parent to clear floats within{{_i}}Add to any parent to clear floats within{{/i}}
.center-block() noneAuto center a block-level element using margin: auto{{_i}}Auto center a block-level element using margin: auto{{/i}}
.ie7-inline-block() noneUse in addition to regular display: inline-block to get IE7 support{{_i}}Use in addition to regular display: inline-block to get IE7 support{{/i}}
.size() @height: 5px, @width: 5pxQuickly set the height and width on one line{{_i}}Quickly set the height and width on one line{{/i}}
.square() @size: 5pxBuilds on .size() to set the width and height as same value{{_i}}Builds on .size() to set the width and height as same value{{/i}}
.opacity() @opacity: 100Set, in whole numbers, the opacity percentage (e.g., "50" or "75"){{_i}}Set, in whole numbers, the opacity percentage (e.g., "50" or "75"){{/i}}
.reset-filter() noneResets any IE filter{{_i}}Resets any IE filter{{/i}}
@@ -410,16 +414,16 @@ - - - + + + - +
MixinParametersUsage{{_i}}Mixin{{/i}}{{_i}}Parameters{{/i}}{{_i}}Usage{{/i}}
.placeholder() @color: @placeholderTextSet the placeholder text color for inputs{{_i}}Set the placeholder text color for inputs{{/i}}
@@ -427,46 +431,46 @@ - - - + + + - - + + - - + + - - + + - - + + - - + + - - + + - - + +
MixinParametersUsage{{_i}}Mixin{{/i}}{{_i}}Parameters{{/i}}{{_i}}Usage{{/i}}
#font > #family > .serif()none{{_i}}Make an element use a serif font stack{{/i}}
#font > #family > .sans-serif()none{{_i}}Make an element use a sans-serif font stack{{/i}}
#font > #family > .monospace()none{{_i}}Make an element use a monospace font stack{{/i}}
#font > .shorthand()@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight{{_i}}Easily set font size, weight, and leading{{/i}}
#font > .serif()@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight{{_i}}Set font family to serif, and control size, weight, and leading{{/i}}
#font > .sans-serif()@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight{{_i}}Set font family to sans-serif, and control size, weight, and leading{{/i}}
#font > .monospace()@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight{{_i}}Set font family to monospace, and control size, weight, and leading{{/i}}
@@ -474,31 +478,31 @@ - - - + + + - - - + + + - - + + - - + + - - + +
MixinParametersUsage{{_i}}Mixin{{/i}}{{_i}}Parameters{{/i}}{{_i}}Usage{{/i}}
.fixed-container().container-fixed()none{{_i}}Provide a fixed-width (set with @siteWidth) container for holding your content{{/i}}
.columns()@columns: 1{{_i}}Build a grid column that spans any number of columns (defaults to 1 column){{/i}}
.offset()@columns: 1{{_i}}Offset a grid column with left margin that spans any number of columns{{/i}}
.gridColumn()none{{_i}}Make an element float like a grid column{{/i}}
@@ -506,76 +510,71 @@ - - - + + + - - - - - - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + +
MixinParametersUsage{{_i}}Mixin{{/i}}{{_i}}Parameters{{/i}}{{_i}}Usage{{/i}}
.border-radius()
.border-radius-custom()@radius: 5px{{_i}}Round the corners of an element. Can be a single value or four space-separated values{{/i}}
.box-shadow()@shadow: 0 1px 3px rgba(0,0,0,.25){{_i}}Add a drop shadow to an element{{/i}}
.transition()@transition{{_i}}Add CSS3 transition effect (e.g., all .2s linear){{/i}}
.rotate()@degrees{{_i}}Rotate an element n degrees{{/i}}
.scale()@ratio{{_i}}Scale an element to n times it's original size{{/i}}
.translate()@x: 0, @y: 0{{_i}}Move an element on the x and y planes{{/i}}
.background-clip()@clip{{_i}}Crop the backgroud of an element (useful for border-radius){{/i}}
.background-size()@size{{_i}}Control the size of background images via CSS3{{/i}}
.box-sizing()@boxmodel{{_i}}Change the box model for an element (e.g., border-box for a full-width input){{/i}}
.user-select()@select{{_i}}Control cursor selection of text on a page{{/i}}
.resizable()@direction: both{{_i}}Make any element resizable on the right and bottom{{/i}}
.content-columns()@columnCount, @columnGap: @gridColumnGutter{{_i}}Make the content of any element use CSS3 columns{{/i}}
@@ -583,56 +582,56 @@ - - - + + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + +
MixinParametersUsage{{_i}}Mixin{{/i}}{{_i}}Parameters{{/i}}{{_i}}Usage{{/i}}
.#translucent > .background()@color: @white, @alpha: 1{{_i}}Give an element a translucent background color{{/i}}
.#translucent > .border()@color: @white, @alpha: 1{{_i}}Give an element a translucent border color{{/i}}
.#gradient > .vertical()@startColor, @endColor{{_i}}Create a cross-browser vertical background gradient{{/i}}
.#gradient > .horizontal()@startColor, @endColor{{_i}}Create a cross-browser horizontal background gradient{{/i}}
.#gradient > .directional()@startColor, @endColor, @deg{{_i}}Create a cross-browser directional background gradient{{/i}}
.#gradient > .vertical-three-colors()@startColor, @midColor, @colorStop, @endColor{{_i}}Create a cross-browser three-color background gradient{{/i}}
.#gradient > .radial()@innerColor, @outerColor{{_i}}Create a cross-browser radial background gradient{{/i}}
.#gradient > .striped()@color, @angle{{_i}}Create a cross-browser striped background gradient{{/i}}
.#gradientBar()@primaryColor, @secondaryColor{{_i}}Used for buttons to assign a gradient and slightly darker border{{/i}}
diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index a89f93d8e1..bc924e3ef7 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -148,7 +148,7 @@ @siteWidth {{_i}}Computed sum of all columns and gutters{{/i}} - {{_i}}Counts number of columns and gutters to set width of the .fixed-container() mixin{{/i}} + {{_i}}Counts number of columns and gutters to set width of the .container-fixed() mixin{{/i}} diff --git a/lib/mixins.less b/lib/mixins.less index e64b80ad36..4ebb94cfcb 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -100,7 +100,7 @@ // Site container // ------------------------- -.fixed-container() { +.container-fixed() { width: @siteWidth; margin-left: auto; margin-right: auto; @@ -137,23 +137,6 @@ -moz-border-radius: @radius; border-radius: @radius; } -.border-radius-custom(@topLeft: 0, @topRight: 0, @bottomRight: 0, @bottomLeft: 0) { - -webkit-border-top-left-radius: @topLeft; - -moz-border-radius-topleft: @topLeft; - border-top-left-radius: @topLeft; - -webkit-border-top-right-radius: @topRight; - -moz-border-radius-topright: @topRight; - border-top-right-radius: @topRight; - -webkit-border-bottom-right-radius: @bottomRight; - -moz-border-radius-bottomright: @bottomRight; - border-bottom-right-radius: @bottomRight; - -webkit-border-bottom-left-radius: @bottomLeft; - -moz-border-radius-bottomleft: @bottomLeft; - border-bottom-left-radius: @bottomLeft; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; -} // Drop shadows .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) { @@ -172,19 +155,19 @@ } // Transformations -.rotate(@degrees: 5deg) { +.rotate(@degrees) { -webkit-transform: rotate(@degrees); -moz-transform: rotate(@degrees); -ms-transform: rotate(@degrees); -o-transform: rotate(@degrees); transform: rotate(@degrees); } -.scale(@value: 1.5) { - -webkit-transform: scale(@value); - -moz-transform: scale(@value); - -ms-transform: scale(@value); - -o-transform: scale(@value); - transform: scale(@value); +.scale(@ratio) { + -webkit-transform: scale(@ratio); + -moz-transform: scale(@ratio); + -ms-transform: scale(@ratio); + -o-transform: scale(@ratio); + transform: scale(@ratio); } .translate(@x: 0, @y: 0) { -webkit-transform: translate(@x, @y); @@ -234,7 +217,7 @@ } // CSS3 Content Columns -.content-columns(@columnCount, @columnGap: 20px) { +.content-columns(@columnCount, @columnGap: @gridColumnGutter) { -webkit-column-count: @columnCount; -moz-column-count: @columnCount; column-count: @columnCount; diff --git a/lib/scaffolding.less b/lib/scaffolding.less index ff029e841b..7002b04083 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -18,7 +18,7 @@ body { // Container (centered, fixed-width layouts) .container { - .fixed-container(); + .container-fixed(); } // Fluid layouts (left aligned, with sidebar, min- & max-width content)