<p>Vendor mixins are mixins to help support multiple browsers by including all relevant vendor prefixs in your compiled CSS.</p>
<p>Vendor mixins are mixins to help support multiple browsers by including all relevant vendor prefixs in your compiled CSS.</p>
<h3id="mixins-box-sizing">Box-sizing</h3>
<h3id="less-mixins-box-sizing">Box-sizing</h3>
<p>Reset your components' box model with a single mixin. For context, see this <ahref="https://developer.mozilla.org/en-US/docs/CSS/box-sizing"target="_blank">helpful article from Mozilla</a>.</p>
<p>Reset your components' box model with a single mixin. For context, see this <ahref="https://developer.mozilla.org/en-US/docs/CSS/box-sizing"target="_blank">helpful article from Mozilla</a>.</p>
<p>Today all modern browsers support the non-prefixed <code>border-radius</code> property. As such, there is no <code>.border-radius()</code> mixin, but Preboot does include shortcuts for quickly rounding two corners on a particular side of an object.</p>
<p>Today all modern browsers support the non-prefixed <code>border-radius</code> property. As such, there is no <code>.border-radius()</code> mixin, but Preboot does include shortcuts for quickly rounding two corners on a particular side of an object.</p>
<p>If your target audience is using the latest and greatest browsers and devices, be sure to just use the <code>box-shadow</code> property on it's own. If you need support for older Android (pre-v4) and iOS devices (pre-iOS 5), use of the mixin to pick up the required <code>-webkit</code> prefix.</p>
<p>If your target audience is using the latest and greatest browsers and devices, be sure to just use the <code>box-shadow</code> property on it's own. If you need support for older Android (pre-v4) and iOS devices (pre-iOS 5), use of the mixin to pick up the required <code>-webkit</code> prefix.</p>
<p>Be sure to use <code>rgba()</code> colors in your box shadows so they blend as seamlessly as possible with backgrounds.</p>
<p>Be sure to use <code>rgba()</code> colors in your box shadows so they blend as seamlessly as possible with backgrounds.</p>
{% highlight css %}
{% highlight css %}
...
@@ -2915,7 +2915,7 @@ a {
...
@@ -2915,7 +2915,7 @@ a {
}
}
{%endhighlight%}
{%endhighlight%}
<h3id="mixins-transitions">Transitions</h3>
<h3id="less-mixins-transitions">Transitions</h3>
<p>Three mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.</p>
<p>Three mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.</p>
<p>Provide context for form controls within each field.</p>
<p>Provide context for form controls within each field.</p>
{% highlight css %}
{% highlight css %}
.placeholder(@color: @input-color-placeholder) {
.placeholder(@color: @input-color-placeholder) {
...
@@ -3053,7 +3053,7 @@ a {
...
@@ -3053,7 +3053,7 @@ a {
}
}
{% endhighlight %}
{% endhighlight %}
<h3id="mixins-columns">Columns</h3>
<h3id="less-mixins-columns">Columns</h3>
<p>Generate columns via CSS within a single element.</p>
<p>Generate columns via CSS within a single element.</p>
{% highlight css %}
{% highlight css %}
.content-columns(@width; @count; @gap) {
.content-columns(@width; @count; @gap) {
...
@@ -3069,7 +3069,7 @@ a {
...
@@ -3069,7 +3069,7 @@ a {
}
}
{% endhighlight %}
{% endhighlight %}
<h3id="mixins-gradients">Gradients</h3>
<h3id="less-mixins-gradients">Gradients</h3>
<p>Easily turn any two colors into a background gradient. Get more advanced and set a direction, use three colors, or use a radial gradient. With a single mixin you get all the prefixed syntaxes you'll need.</p>
<p>Easily turn any two colors into a background gradient. Get more advanced and set a direction, use three colors, or use a radial gradient. With a single mixin you get all the prefixed syntaxes you'll need.</p>
{% highlight css %}
{% highlight css %}
#gradient > .vertical(#333; #000);
#gradient > .vertical(#333; #000);
...
@@ -3095,7 +3095,7 @@ a {
...
@@ -3095,7 +3095,7 @@ a {
<h2id="less-mixins-utility">Utility mixins</h2>
<h2id="less-mixins-utility">Utility mixins</h2>
<p>Utility mixins are mixins that combine otherwise unrelated CSS properties to achieve a specific goal or task.</p>
<p>Utility mixins are mixins that combine otherwise unrelated CSS properties to achieve a specific goal or task.</p>
<h3id="mixins-clearfix">Clearfix</h3>
<h3id="less-mixins-clearfix">Clearfix</h3>
<p>Forget adding <code>class="clearfix"</code> to any element and instead add the <code>.clearfix()</code> mixin where appropriate. Uses the <ahref="http://nicolasgallagher.com/micro-clearfix-hack/"target="_blank">micro clearfix</a> from <ahref="http://twitter.com/necolas"target="_blank">Nicolas Gallager</a>.</p>
<p>Forget adding <code>class="clearfix"</code> to any element and instead add the <code>.clearfix()</code> mixin where appropriate. Uses the <ahref="http://nicolasgallagher.com/micro-clearfix-hack/"target="_blank">micro clearfix</a> from <ahref="http://twitter.com/necolas"target="_blank">Nicolas Gallager</a>.</p>
<p>Easily truncate text with an ellipsis with a single mixin. <strong>Requires element to be <code>block</code> or <code>inline-block</code> level.</strong></p>
<p>Easily truncate text with an ellipsis with a single mixin. <strong>Requires element to be <code>block</code> or <code>inline-block</code> level.</strong></p>
<p>Specify two image paths and the @1x image dimensions, and Preboot will provide an @2x media query. <strong>If you have many images to serve, consider writing your retina image CSS manually in a single media query.</strong></p>
<p>Specify two image paths and the @1x image dimensions, and Preboot will provide an @2x media query. <strong>If you have many images to serve, consider writing your retina image CSS manually in a single media query.</strong></p>