Skip to content

B
bootstrap
Commit de4ada3b authored by Mark Otto's avatar Mark Otto
Browse files
Options

spec out all mixins on less page

parent bd36e2a1
Show whitespace changes
Inline Side-by-side
Showing with 606 additions and 106 deletions
docs/less.html
View file @ de4ada3b
......@@ -105,11 +105,11 @@
</div>
<div class="row">
<div class="span4">
<h3>Variables</h3>
<h3><a href="#variables">Variables</a></h3>
<p>Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though&mdash;assign colors or pixel values as variables and change them once.</p>
</div>
<div class="span4">
<h3>Mixins</h3>
<h3><a href="#mixins">Mixins</a></h3>
<p>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.</p>
</div>
<div class="span4">
......@@ -395,62 +395,312 @@
<!-- MIXINS
================================================== -->
<div class="page-header" id="mixins">
<section id="mixins">
<div class="page-header">
<h1>Bootstrap mixins <small></small></h1>
</div>
<h3>Mixins up the wazoo</h3>
<p>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 <code>box-shadow</code>, cross-browser gradients, font stacks, and more. Below is a sample of the mixins that are included with Bootstrap.</p>
<h4>Font stacks</h4>
</div>
<h2>About mixins</h2>
<div class="row">
<div class="span4">
<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>
<pre class="prettyprint linenums">
#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!
</pre>
<h4>Gradients</h4>
</div><!-- /span4 -->
<div class="span4">
<h3>Parametric mixins</h3>
<p>A parametric mixin is just like a basic mixin, but it also accepts optional paramaters (hence the name).</p>
<pre class="prettyprint linenums">
#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!
</pre>
</div><!-- /span4 -->
<div class="span4">
<h3>Easily add your own</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>So, go ahead and use the existing ones or feel free to add your own as you need.</p>
</div><!-- /span4 -->
</div><!-- /row -->
<h2>Included mixins</h2>
<h3>Utilities</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th class="span4">Mixin</th>
<th>Paramaters</th>
<th>Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.clearfix()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.center-block()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.ie7-inline-block()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.size()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.square()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.opacity()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.reset-filter()</code></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<h3>Forms</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th class="span4">Mixin</th>
<th>Paramaters</th>
<th>Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.placeholder()</code></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<h3>Typography</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th class="span4">Mixin</th>
<th>Paramaters</th>
<th>Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>#font > #family > .serif()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>#font > #family > .sans-serif()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>#font > #family > .monospace()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>#font > .shorthand()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>#font > .serif()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>#font > .sans-serif()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>#font > .monospace()</code></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<h3>Grid system</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th class="span4">Mixin</th>
<th>Paramaters</th>
<th>Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.fixed-container()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.columns()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.offset()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.gridColumn()</code></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<h3>CSS3 properties</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th class="span4">Mixin</th>
<th>Paramaters</th>
<th>Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.border-radius()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.border-radius-custom()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.box-shadow()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.transition()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.rotate()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.scale()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.translate()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.background-clip()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.background-size()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.box-sizing()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.user-select()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.resizable()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.content-columns()</code></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<h3>Backgrounds and gradients</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th class="span4">Mixin</th>
<th>Paramaters</th>
<th>Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.#translucent > .background()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.#translucent > .border()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.#gradient > .vertical()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.#gradient > .horizontal()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.#gradient > .directional()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.#gradient > .vertical-three-colors()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.#gradient > .radial()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.#gradient > .striped()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.#gradientBar()</code></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</section>
<h3>Operations</h3>
<p>Get fancy and perform some math to generate flexible and powerful mixins like the one below.</p>
<pre class="prettyprint linenums">
// 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));
}
</pre>
<!-- COMPILING LESS AND BOOTSTRAP
......
docs/templates/pages/less.mustache
View file @ de4ada3b
......@@ -42,11 +42,11 @@
</div>
<div class="row">
<div class="span4">
<h3>{{_i}}Variables{{/i}}</h3>
<h3><a href="#variables">{{_i}}Variables{{/i}}</a></h3>
<p>{{_i}}Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though&mdash;assign colors or pixel values as variables and change them once.{{/i}}</p>
</div>
<div class="span4">
<h3>{{_i}}Mixins{{/i}}</h3>
<h3><a href="#mixins">{{_i}}Mixins{{/i}}</a></h3>
<p>{{_i}}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.{{/i}}</p>
</div>
<div class="span4">
......@@ -332,62 +332,312 @@
<!-- MIXINS
================================================== -->
<div class="page-header" id="mixins">
<section id="mixins">
<div class="page-header">
<h1>{{_i}}Bootstrap mixins <small></small>{{/i}}</h1>
</div>
<h3>{{_i}}Mixins up the wazoo{{/i}}</h3>
<p>{{_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 <code>box-shadow</code>, cross-browser gradients, font stacks, and more. Below is a sample of the mixins that are included with Bootstrap.{{/i}}</p>
<h4>{{_i}}Font stacks{{/i}}</h4>
</div>
<h2>About mixins</h2>
<div class="row">
<div class="span4">
<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>
<pre class="prettyprint linenums">
#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!
</pre>
<h4>{{_i}}Gradients{{/i}}</h4>
</div><!-- /span4 -->
<div class="span4">
<h3>Parametric mixins</h3>
<p>A parametric mixin is just like a basic mixin, but it also accepts optional paramaters (hence the name).</p>
<pre class="prettyprint linenums">
#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!
</pre>
</div><!-- /span4 -->
<div class="span4">
<h3>Easily add your own</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>So, go ahead and use the existing ones or feel free to add your own as you need.</p>
</div><!-- /span4 -->
</div><!-- /row -->
<h2>Included mixins</h2>
<h3>Utilities</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th class="span4">Mixin</th>
<th>Paramaters</th>
<th>Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.clearfix()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.center-block()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.ie7-inline-block()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.size()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.square()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.opacity()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.reset-filter()</code></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<h3>Forms</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th class="span4">Mixin</th>
<th>Paramaters</th>
<th>Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.placeholder()</code></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<h3>Typography</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th class="span4">Mixin</th>
<th>Paramaters</th>
<th>Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>#font > #family > .serif()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>#font > #family > .sans-serif()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>#font > #family > .monospace()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>#font > .shorthand()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>#font > .serif()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>#font > .sans-serif()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>#font > .monospace()</code></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<h3>Grid system</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th class="span4">Mixin</th>
<th>Paramaters</th>
<th>Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.fixed-container()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.columns()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.offset()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.gridColumn()</code></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<h3>CSS3 properties</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th class="span4">Mixin</th>
<th>Paramaters</th>
<th>Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.border-radius()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.border-radius-custom()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.box-shadow()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.transition()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.rotate()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.scale()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.translate()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.background-clip()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.background-size()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.box-sizing()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.user-select()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.resizable()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.content-columns()</code></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<h3>Backgrounds and gradients</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th class="span4">Mixin</th>
<th>Paramaters</th>
<th>Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.#translucent > .background()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.#translucent > .border()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.#gradient > .vertical()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.#gradient > .horizontal()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.#gradient > .directional()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.#gradient > .vertical-three-colors()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.#gradient > .radial()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.#gradient > .striped()</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>.#gradientBar()</code></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</section>
<h3>{{_i}}Operations{{/i}}</h3>
<p>{{_i}}Get fancy and perform some math to generate flexible and powerful mixins like the one below.{{/i}}</p>
<pre class="prettyprint linenums">
// 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));
}
</pre>
<!-- COMPILING LESS AND BOOTSTRAP
......
Markdown is supported
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