Skip to content
GitLab
Commit b6b7d134 authored by Mark Otto's avatar Mark Otto
Browse files

finish the rest of the less page mixins docs

parent 7d83f45e
Hide whitespace changes
Inline Side-by-side
Showing
with 193 additions and 212 deletions
+193 -212
docs/less.html
+ 73
- 74
View file @ b6b7d134
...@@ -406,14 +406,18 @@ ...@@ -406,14 +406,18 @@
<h3>Basic mixins</h3> <h3>Basic mixins</h3>
<p>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.</p> <p>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.</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
Coming soon! .element {
.clearfix();
}
</pre> </pre>
</div><!-- /span4 --> </div><!-- /span4 -->
<div class="span4"> <div class="span4">
<h3>Parametric mixins</h3> <h3>Parametric mixins</h3>
<p>A parametric mixin is just like a basic mixin, but it also accepts optional Parameters (hence the name).</p> <p>A parametric mixin is just like a basic mixin, but it also accepts parameters (hence the name) with optional default values.</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
Coming soon! .element {
.border-radius(4px);
}
</pre> </pre>
</div><!-- /span4 --> </div><!-- /span4 -->
<div class="span4"> <div class="span4">
...@@ -499,38 +503,38 @@ ...@@ -499,38 +503,38 @@
<tbody> <tbody>
<tr> <tr>
<td><code>#font > #family > .serif()</code></td> <td><code>#font > #family > .serif()</code></td>
<td></td> <td><em class="muted">none</em></td>
<td></td> <td>Make an element use a serif font stack</td>
</tr> </tr>
<tr> <tr>
<td><code>#font > #family > .sans-serif()</code></td> <td><code>#font > #family > .sans-serif()</code></td>
<td></td> <td><em class="muted">none</em></td>
<td></td> <td>Make an element use a sans-serif font stack</td>
</tr> </tr>
<tr> <tr>
<td><code>#font > #family > .monospace()</code></td> <td><code>#font > #family > .monospace()</code></td>
<td></td> <td><em class="muted">none</em></td>
<td></td> <td>Make an element use a monospace font stack</td>
</tr> </tr>
<tr> <tr>
<td><code>#font > .shorthand()</code></td> <td><code>#font > .shorthand()</code></td>
<td></td> <td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
<td></td> <td>Easily set font size, weight, and leading</td>
</tr> </tr>
<tr> <tr>
<td><code>#font > .serif()</code></td> <td><code>#font > .serif()</code></td>
<td></td> <td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
<td></td> <td>Set font family to serif, and control size, weight, and leading</td>
</tr> </tr>
<tr> <tr>
<td><code>#font > .sans-serif()</code></td> <td><code>#font > .sans-serif()</code></td>
<td></td> <td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
<td></td> <td>Set font family to sans-serif, and control size, weight, and leading</td>
</tr> </tr>
<tr> <tr>
<td><code>#font > .monospace()</code></td> <td><code>#font > .monospace()</code></td>
<td></td> <td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
<td></td> <td>Set font family to monospace, and control size, weight, and leading</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -545,24 +549,24 @@ ...@@ -545,24 +549,24 @@
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td><code>.fixed-container()</code></td> <td><code>.container-fixed()</code></td>
<td></td> <td><em class="muted">none</em></td>
<td></td> <td>Provide a fixed-width (set with <code>@siteWidth</code>) container for holding your content</td>
</tr> </tr>
<tr> <tr>
<td><code>.columns()</code></td> <td><code>.columns()</code></td>
<td></td> <td><code>@columns: 1</code></td>
<td></td> <td>Build a grid column that spans any number of columns (defaults to 1 column)</td>
</tr> </tr>
<tr> <tr>
<td><code>.offset()</code></td> <td><code>.offset()</code></td>
<td></td> <td><code>@columns: 1</code></td>
<td></td> <td>Offset a grid column with left margin that spans any number of columns</td>
</tr> </tr>
<tr> <tr>
<td><code>.gridColumn()</code></td> <td><code>.gridColumn()</code></td>
<td></td> <td><em class="muted">none</em></td>
<td></td> <td>Make an element float like a grid column</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -570,7 +574,7 @@ ...@@ -570,7 +574,7 @@
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th class="span4">Mixin</th> <th class="span3">Mixin</th>
<th>Parameters</th> <th>Parameters</th>
<th>Usage</th> <th>Usage</th>
</tr> </tr>
...@@ -578,68 +582,63 @@ ...@@ -578,68 +582,63 @@
<tbody> <tbody>
<tr> <tr>
<td><code>.border-radius()</code></td> <td><code>.border-radius()</code></td>
<td></td> <td><code>@radius: 5px</code></td>
<td></td> <td>Round the corners of an element. Can be a single value or four space-separated values</td>
</tr>
<tr>
<td><code>.border-radius-custom()</code></td>
<td></td>
<td></td>
</tr> </tr>
<tr> <tr>
<td><code>.box-shadow()</code></td> <td><code>.box-shadow()</code></td>
<td></td> <td><code>@shadow: 0 1px 3px rgba(0,0,0,.25)</code></td>
<td></td> <td>Add a drop shadow to an element</td>
</tr> </tr>
<tr> <tr>
<td><code>.transition()</code></td> <td><code>.transition()</code></td>
<td></td> <td><code>@transition</code></td>
<td></td> <td>Add CSS3 transition effect (e.g., <code>all .2s linear</code>)</td>
</tr> </tr>
<tr> <tr>
<td><code>.rotate()</code></td> <td><code>.rotate()</code></td>
<td></td> <td><code>@degrees</code></td>
<td></td> <td>Rotate an element <em>n</em> degrees</td>
</tr> </tr>
<tr> <tr>
<td><code>.scale()</code></td> <td><code>.scale()</code></td>
<td></td> <td><code>@ratio</code></td>
<td></td> <td>Scale an element to <em>n</em> times it's original size</td>
</tr> </tr>
<tr> <tr>
<td><code>.translate()</code></td> <td><code>.translate()</code></td>
<td></td> <td><code>@x: 0, @y: 0</code></td>
<td></td> <td>Move an element on the x and y planes</td>
</tr> </tr>
<tr> <tr>
<td><code>.background-clip()</code></td> <td><code>.background-clip()</code></td>
<td></td> <td><code>@clip</code></td>
<td></td> <td>Crop the backgroud of an element (useful for <code>border-radius</code>)</td>
</tr> </tr>
<tr> <tr>
<td><code>.background-size()</code></td> <td><code>.background-size()</code></td>
<td></td> <td><code>@size</code></td>
<td></td> <td>Control the size of background images via CSS3</td>
</tr> </tr>
<tr> <tr>
<td><code>.box-sizing()</code></td> <td><code>.box-sizing()</code></td>
<td></td> <td><code>@boxmodel</code></td>
<td></td> <td>Change the box model for an element (e.g., <code>border-box</code> for a full-width <code>input</code>)</td>
</tr> </tr>
<tr> <tr>
<td><code>.user-select()</code></td> <td><code>.user-select()</code></td>
<td></td> <td><code>@select</code></td>
<td></td> <td>Control cursor selection of text on a page</td>
</tr> </tr>
<tr> <tr>
<td><code>.resizable()</code></td> <td><code>.resizable()</code></td>
<td></td> <td><code>@direction: both</code></td>
<td></td> <td>Make any element resizable on the right and bottom</td>
</tr> </tr>
<tr> <tr>
<td><code>.content-columns()</code></td> <td><code>.content-columns()</code></td>
<td></td> <td><code>@columnCount, @columnGap: @gridColumnGutter</code></td>
<td></td> <td>Make the content of any element use CSS3 columns</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -655,48 +654,48 @@ ...@@ -655,48 +654,48 @@
<tbody> <tbody>
<tr> <tr>
<td><code>.#translucent > .background()</code></td> <td><code>.#translucent > .background()</code></td>
<td></td> <td><code>@color: @white, @alpha: 1</code></td>
<td></td> <td>Give an element a translucent background color</td>
</tr> </tr>
<tr> <tr>
<td><code>.#translucent > .border()</code></td> <td><code>.#translucent > .border()</code></td>
<td></td> <td><code>@color: @white, @alpha: 1</code></td>
<td></td> <td>Give an element a translucent border color</td>
</tr> </tr>
<tr> <tr>
<td><code>.#gradient > .vertical()</code></td> <td><code>.#gradient > .vertical()</code></td>
<td></td> <td><code>@startColor, @endColor</code></td>
<td></td> <td>Create a cross-browser vertical background gradient</td>
</tr> </tr>
<tr> <tr>
<td><code>.#gradient > .horizontal()</code></td> <td><code>.#gradient > .horizontal()</code></td>
<td></td> <td><code>@startColor, @endColor</code></td>
<td></td> <td>Create a cross-browser horizontal background gradient</td>
</tr> </tr>
<tr> <tr>
<td><code>.#gradient > .directional()</code></td> <td><code>.#gradient > .directional()</code></td>
<td></td> <td><code>@startColor, @endColor, @deg</code></td>
<td></td> <td>Create a cross-browser directional background gradient</td>
</tr> </tr>
<tr> <tr>
<td><code>.#gradient > .vertical-three-colors()</code></td> <td><code>.#gradient > .vertical-three-colors()</code></td>
<td></td> <td><code>@startColor, @midColor, @colorStop, @endColor</code></td>
<td></td> <td>Create a cross-browser three-color background gradient</td>
</tr> </tr>
<tr> <tr>
<td><code>.#gradient > .radial()</code></td> <td><code>.#gradient > .radial()</code></td>
<td></td> <td><code>@innerColor, @outerColor</code></td>
<td></td> <td>Create a cross-browser radial background gradient</td>
</tr> </tr>
<tr> <tr>
<td><code>.#gradient > .striped()</code></td> <td><code>.#gradient > .striped()</code></td>
<td></td> <td><code>@color, @angle</code></td>
<td></td> <td>Create a cross-browser striped background gradient</td>
</tr> </tr>
<tr> <tr>
<td><code>.#gradientBar()</code></td> <td><code>.#gradientBar()</code></td>
<td></td> <td><code>@primaryColor, @secondaryColor</code></td>
<td></td> <td>Used for buttons to assign a gradient and slightly darker border</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
......
docs/scaffolding.html
+ 1
- 1
View file @ b6b7d134
...@@ -212,7 +212,7 @@ ...@@ -212,7 +212,7 @@
<tr> <tr>
<td><code>@siteWidth</code></td> <td><code>@siteWidth</code></td>
<td><em>Computed sum of all columns and gutters</em></td> <td><em>Computed sum of all columns and gutters</em></td>
<td>Counts number of columns and gutters to set width of the <code>.fixed-container()</code> mixin</td> <td>Counts number of columns and gutters to set width of the <code>.container-fixed()</code> mixin</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
......
docs/templates/pages/less.mustache
+ 108
- 109
View file @ b6b7d134
...@@ -270,7 +270,7 @@ ...@@ -270,7 +270,7 @@
</table> </table>
</div> </div>
<div class="span6"> <div class="span6">
<h4>Form states and alerts</h4> <h4>{{_i}}Form states and alerts{{/i}}</h4>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<tbody> <tbody>
<tr> <tr>
...@@ -336,73 +336,77 @@ ...@@ -336,73 +336,77 @@
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Bootstrap mixins <small></small>{{/i}}</h1> <h1>{{_i}}Bootstrap mixins <small></small>{{/i}}</h1>
</div> </div>
<h2>About mixins</h2> <h2>{{_i}}About mixins{{/i}}</h2>
<div class="row"> <div class="row">
<div class="span4"> <div class="span4">
<h3>Basic mixins</h3> <h3>{{_i}}Basic mixins{{/i}}</h3>
<p>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.</p> <p>{{_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}}</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
Coming soon! .element {
.clearfix();
}
</pre> </pre>
</div><!-- /span4 --> </div><!-- /span4 -->
<div class="span4"> <div class="span4">
<h3>Parametric mixins</h3> <h3>{{_i}}Parametric mixins{{/i}}</h3>
<p>A parametric mixin is just like a basic mixin, but it also accepts optional Parameters (hence the name).</p> <p>{{_i}}A parametric mixin is just like a basic mixin, but it also accepts parameters (hence the name) with optional default values.{{/i}}</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
Coming soon! .element {
.border-radius(4px);
}
</pre> </pre>
</div><!-- /span4 --> </div><!-- /span4 -->
<div class="span4"> <div class="span4">
<h3>Easily add your own</h3> <h3>{{_i}}Easily add your own{{/i}}</h3>
<p>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.</p> <p>{{_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}}</p>
<p>So, go ahead and use the existing ones or feel free to add your own as you need.</p> <p>{{_i}}So, go ahead and use the existing ones or feel free to add your own as you need.{{/i}}</p>
</div><!-- /span4 --> </div><!-- /span4 -->
</div><!-- /row --> </div><!-- /row -->
<h2>Included mixins</h2> <h2>{{_i}}Included mixins{{/i}}</h2>
<h3>Utilities</h3> <h3>{{_i}}Utilities{{/i}}</h3>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th class="span4">Mixin</th> <th class="span4">{{_i}}Mixin{{/i}}</th>
<th>Parameters</th> <th>{{_i}}Parameters{{/i}}</th>
<th>Usage</th> <th>{{_i}}Usage{{/i}}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td><code>.clearfix()</code></td> <td><code>.clearfix()</code></td>
<td><em class="muted">none</em></td> <td><em class="muted">none</em></td>
<td>Add to any parent to clear floats within</td> <td>{{_i}}Add to any parent to clear floats within{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>.center-block()</code></td> <td><code>.center-block()</code></td>
<td><em class="muted">none</em></td> <td><em class="muted">none</em></td>
<td>Auto center a block-level element using <code>margin: auto</code></td> <td>{{_i}}Auto center a block-level element using <code>margin: auto</code>{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>.ie7-inline-block()</code></td> <td><code>.ie7-inline-block()</code></td>
<td><em class="muted">none</em></td> <td><em class="muted">none</em></td>
<td>Use in addition to regular <code>display: inline-block</code> to get IE7 support</td> <td>{{_i}}Use in addition to regular <code>display: inline-block</code> to get IE7 support{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>.size()</code></td> <td><code>.size()</code></td>
<td><code>@height: 5px, @width: 5px</code></td> <td><code>@height: 5px, @width: 5px</code></td>
<td>Quickly set the height and width on one line</td> <td>{{_i}}Quickly set the height and width on one line{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>.square()</code></td> <td><code>.square()</code></td>
<td><code>@size: 5px</code></td> <td><code>@size: 5px</code></td>
<td>Builds on <code>.size()</code> to set the width and height as same value</td> <td>{{_i}}Builds on <code>.size()</code> to set the width and height as same value{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>.opacity()</code></td> <td><code>.opacity()</code></td>
<td><code>@opacity: 100</code></td> <td><code>@opacity: 100</code></td>
<td>Set, in whole numbers, the opacity percentage (e.g., "50" or "75")</td> <td>{{_i}}Set, in whole numbers, the opacity percentage (e.g., "50" or "75"){{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>.reset-filter()</code></td> <td><code>.reset-filter()</code></td>
<td><em class="muted">none</em></td> <td><em class="muted">none</em></td>
<td>Resets any IE filter</td> <td>{{_i}}Resets any IE filter{{/i}}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -410,16 +414,16 @@ ...@@ -410,16 +414,16 @@
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th class="span4">Mixin</th> <th class="span4">{{_i}}Mixin{{/i}}</th>
<th>Parameters</th> <th>{{_i}}Parameters{{/i}}</th>
<th>Usage</th> <th>{{_i}}Usage{{/i}}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td><code>.placeholder()</code></td> <td><code>.placeholder()</code></td>
<td><code>@color: @placeholderText</code></td> <td><code>@color: @placeholderText</code></td>
<td>Set the <code>placeholder</code> text color for inputs</td> <td>{{_i}}Set the <code>placeholder</code> text color for inputs{{/i}}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -427,46 +431,46 @@ ...@@ -427,46 +431,46 @@
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th class="span4">Mixin</th> <th class="span4">{{_i}}Mixin{{/i}}</th>
<th>Parameters</th> <th>{{_i}}Parameters{{/i}}</th>
<th>Usage</th> <th>{{_i}}Usage{{/i}}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td><code>#font > #family > .serif()</code></td> <td><code>#font > #family > .serif()</code></td>
<td></td> <td><em class="muted">none</em></td>
<td></td> <td>{{_i}}Make an element use a serif font stack{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>#font > #family > .sans-serif()</code></td> <td><code>#font > #family > .sans-serif()</code></td>
<td></td> <td><em class="muted">none</em></td>
<td></td> <td>{{_i}}Make an element use a sans-serif font stack{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>#font > #family > .monospace()</code></td> <td><code>#font > #family > .monospace()</code></td>
<td></td> <td><em class="muted">none</em></td>
<td></td> <td>{{_i}}Make an element use a monospace font stack{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>#font > .shorthand()</code></td> <td><code>#font > .shorthand()</code></td>
<td></td> <td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
<td></td> <td>{{_i}}Easily set font size, weight, and leading{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>#font > .serif()</code></td> <td><code>#font > .serif()</code></td>
<td></td> <td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
<td></td> <td>{{_i}}Set font family to serif, and control size, weight, and leading{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>#font > .sans-serif()</code></td> <td><code>#font > .sans-serif()</code></td>
<td></td> <td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
<td></td> <td>{{_i}}Set font family to sans-serif, and control size, weight, and leading{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>#font > .monospace()</code></td> <td><code>#font > .monospace()</code></td>
<td></td> <td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
<td></td> <td>{{_i}}Set font family to monospace, and control size, weight, and leading{{/i}}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -474,31 +478,31 @@ ...@@ -474,31 +478,31 @@
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th class="span4">Mixin</th> <th class="span4">{{_i}}Mixin{{/i}}</th>
<th>Parameters</th> <th>{{_i}}Parameters{{/i}}</th>
<th>Usage</th> <th>{{_i}}Usage{{/i}}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td><code>.fixed-container()</code></td> <td><code>.container-fixed()</code></td>
<td></td> <td><em class="muted">none</em></td>
<td></td> <td>{{_i}}Provide a fixed-width (set with <code>@siteWidth</code>) container for holding your content{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>.columns()</code></td> <td><code>.columns()</code></td>
<td></td> <td><code>@columns: 1</code></td>
<td></td> <td>{{_i}}Build a grid column that spans any number of columns (defaults to 1 column){{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>.offset()</code></td> <td><code>.offset()</code></td>
<td></td> <td><code>@columns: 1</code></td>
<td></td> <td>{{_i}}Offset a grid column with left margin that spans any number of columns{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>.gridColumn()</code></td> <td><code>.gridColumn()</code></td>
<td></td> <td><em class="muted">none</em></td>
<td></td> <td>{{_i}}Make an element float like a grid column{{/i}}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -506,76 +510,71 @@ ...@@ -506,76 +510,71 @@
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th class="span4">Mixin</th> <th class="span3">{{_i}}Mixin{{/i}}</th>
<th>Parameters</th> <th>{{_i}}Parameters{{/i}}</th>
<th>Usage</th> <th>{{_i}}Usage{{/i}}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td><code>.border-radius()</code></td> <td><code>.border-radius()</code></td>
<td></td> <td><code>@radius: 5px</code></td>
<td></td> <td>{{_i}}Round the corners of an element. Can be a single value or four space-separated values{{/i}}</td>
</tr>
<tr>
<td><code>.border-radius-custom()</code></td>
<td></td>
<td></td>
</tr> </tr>
<tr> <tr>
<td><code>.box-shadow()</code></td> <td><code>.box-shadow()</code></td>
<td></td> <td><code>@shadow: 0 1px 3px rgba(0,0,0,.25)</code></td>
<td></td> <td>{{_i}}Add a drop shadow to an element{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>.transition()</code></td> <td><code>.transition()</code></td>
<td></td> <td><code>@transition</code></td>
<td></td> <td>{{_i}}Add CSS3 transition effect (e.g., <code>all .2s linear</code>){{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>.rotate()</code></td> <td><code>.rotate()</code></td>
<td></td> <td><code>@degrees</code></td>
<td></td> <td>{{_i}}Rotate an element <em>n</em> degrees{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>.scale()</code></td> <td><code>.scale()</code></td>
<td></td> <td><code>@ratio</code></td>
<td></td> <td>{{_i}}Scale an element to <em>n</em> times it's original size{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>.translate()</code></td> <td><code>.translate()</code></td>
<td></td> <td><code>@x: 0, @y: 0</code></td>
<td></td> <td>{{_i}}Move an element on the x and y planes{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>.background-clip()</code></td> <td><code>.background-clip()</code></td>
<td></td> <td><code>@clip</code></td>
<td></td> <td>{{_i}}Crop the backgroud of an element (useful for <code>border-radius</code>){{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>.background-size()</code></td> <td><code>.background-size()</code></td>
<td></td> <td><code>@size</code></td>
<td></td> <td>{{_i}}Control the size of background images via CSS3{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>.box-sizing()</code></td> <td><code>.box-sizing()</code></td>
<td></td> <td><code>@boxmodel</code></td>
<td></td> <td>{{_i}}Change the box model for an element (e.g., <code>border-box</code> for a full-width <code>input</code>){{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>.user-select()</code></td> <td><code>.user-select()</code></td>
<td></td> <td><code>@select</code></td>
<td></td> <td>{{_i}}Control cursor selection of text on a page{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>.resizable()</code></td> <td><code>.resizable()</code></td>
<td></td> <td><code>@direction: both</code></td>
<td></td> <td>{{_i}}Make any element resizable on the right and bottom{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>.content-columns()</code></td> <td><code>.content-columns()</code></td>
<td></td> <td><code>@columnCount, @columnGap: @gridColumnGutter</code></td>
<td></td> <td>{{_i}}Make the content of any element use CSS3 columns{{/i}}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -583,56 +582,56 @@ ...@@ -583,56 +582,56 @@
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th class="span4">Mixin</th> <th class="span4">{{_i}}Mixin{{/i}}</th>
<th>Parameters</th> <th>{{_i}}Parameters{{/i}}</th>
<th>Usage</th> <th>{{_i}}Usage{{/i}}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td><code>.#translucent > .background()</code></td> <td><code>.#translucent > .background()</code></td>
<td></td> <td><code>@color: @white, @alpha: 1</code></td>
<td></td> <td>{{_i}}Give an element a translucent background color{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>.#translucent > .border()</code></td> <td><code>.#translucent > .border()</code></td>
<td></td> <td><code>@color: @white, @alpha: 1</code></td>
<td></td> <td>{{_i}}Give an element a translucent border color{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>.#gradient > .vertical()</code></td> <td><code>.#gradient > .vertical()</code></td>
<td></td> <td><code>@startColor, @endColor</code></td>
<td></td> <td>{{_i}}Create a cross-browser vertical background gradient{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>.#gradient > .horizontal()</code></td> <td><code>.#gradient > .horizontal()</code></td>
<td></td> <td><code>@startColor, @endColor</code></td>
<td></td> <td>{{_i}}Create a cross-browser horizontal background gradient{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>.#gradient > .directional()</code></td> <td><code>.#gradient > .directional()</code></td>
<td></td> <td><code>@startColor, @endColor, @deg</code></td>
<td></td> <td>{{_i}}Create a cross-browser directional background gradient{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>.#gradient > .vertical-three-colors()</code></td> <td><code>.#gradient > .vertical-three-colors()</code></td>
<td></td> <td><code>@startColor, @midColor, @colorStop, @endColor</code></td>
<td></td> <td>{{_i}}Create a cross-browser three-color background gradient{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>.#gradient > .radial()</code></td> <td><code>.#gradient > .radial()</code></td>
<td></td> <td><code>@innerColor, @outerColor</code></td>
<td></td> <td>{{_i}}Create a cross-browser radial background gradient{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>.#gradient > .striped()</code></td> <td><code>.#gradient > .striped()</code></td>
<td></td> <td><code>@color, @angle</code></td>
<td></td> <td>{{_i}}Create a cross-browser striped background gradient{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>.#gradientBar()</code></td> <td><code>.#gradientBar()</code></td>
<td></td> <td><code>@primaryColor, @secondaryColor</code></td>
<td></td> <td>{{_i}}Used for buttons to assign a gradient and slightly darker border{{/i}}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
......
docs/templates/pages/scaffolding.mustache
+ 1
- 1
View file @ b6b7d134
...@@ -148,7 +148,7 @@ ...@@ -148,7 +148,7 @@
<tr> <tr>
<td><code>@siteWidth</code></td> <td><code>@siteWidth</code></td>
<td><em>{{_i}}Computed sum of all columns and gutters{{/i}}</em></td> <td><em>{{_i}}Computed sum of all columns and gutters{{/i}}</em></td>
<td>{{_i}}Counts number of columns and gutters to set width of the <code>.fixed-container()</code> mixin{{/i}}</td> <td>{{_i}}Counts number of columns and gutters to set width of the <code>.container-fixed()</code> mixin{{/i}}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
......
lib/mixins.less
+ 9
- 26
View file @ b6b7d134
...@@ -100,7 +100,7 @@ ...@@ -100,7 +100,7 @@
// Site container // Site container
// ------------------------- // -------------------------
.fixed-container() { .container-fixed() {
width: @siteWidth; width: @siteWidth;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
...@@ -137,23 +137,6 @@ ...@@ -137,23 +137,6 @@
-moz-border-radius: @radius; -moz-border-radius: @radius;
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 // Drop shadows
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) { .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
...@@ -172,19 +155,19 @@ ...@@ -172,19 +155,19 @@
} }
// Transformations // Transformations
.rotate(@degrees: 5deg) { .rotate(@degrees) {
-webkit-transform: rotate(@degrees); -webkit-transform: rotate(@degrees);
-moz-transform: rotate(@degrees); -moz-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); -ms-transform: rotate(@degrees);
-o-transform: rotate(@degrees); -o-transform: rotate(@degrees);
transform: rotate(@degrees); transform: rotate(@degrees);
} }
.scale(@value: 1.5) { .scale(@ratio) {
-webkit-transform: scale(@value); -webkit-transform: scale(@ratio);
-moz-transform: scale(@value); -moz-transform: scale(@ratio);
-ms-transform: scale(@value); -ms-transform: scale(@ratio);
-o-transform: scale(@value); -o-transform: scale(@ratio);
transform: scale(@value); transform: scale(@ratio);
} }
.translate(@x: 0, @y: 0) { .translate(@x: 0, @y: 0) {
-webkit-transform: translate(@x, @y); -webkit-transform: translate(@x, @y);
...@@ -234,7 +217,7 @@ ...@@ -234,7 +217,7 @@
} }
// CSS3 Content Columns // CSS3 Content Columns
.content-columns(@columnCount, @columnGap: 20px) { .content-columns(@columnCount, @columnGap: @gridColumnGutter) {
-webkit-column-count: @columnCount; -webkit-column-count: @columnCount;
-moz-column-count: @columnCount; -moz-column-count: @columnCount;
column-count: @columnCount; column-count: @columnCount;
......
lib/scaffolding.less
+ 1
- 1
View file @ b6b7d134
...@@ -18,7 +18,7 @@ body { ...@@ -18,7 +18,7 @@ body {
// Container (centered, fixed-width layouts) // Container (centered, fixed-width layouts)
.container { .container {
.fixed-container(); .container-fixed();
} }
// Fluid layouts (left aligned, with sidebar, min- & max-width content) // Fluid layouts (left aligned, with sidebar, min- & max-width content)
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment