From 7a9d9f7dc485bcd624c1e49c99029c9d2d410e11 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Tue, 3 Dec 2013 11:22:52 -0800 Subject: account for #11050 in the docs --- css.html | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index f1679c703..41e785702 100644 --- a/css.html +++ b/css.html @@ -178,13 +178,11 @@ base_url: "../" Offsets - N/A - Yes + Yes Column ordering - N/A - Yes + Yes -- cgit v1.2.3 From 66f9c7d6d5de97965a119f6d5f4ad1704e8f789d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 4 Dec 2013 21:10:13 -0800 Subject: Fixes #11436: mention in docs that .container isn't nestable; update docs to mention width, not max-width --- css.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index 41e785702..ee9d3ec71 100644 --- a/css.html +++ b/css.html @@ -54,7 +54,8 @@ base_url: "../"

For improved cross-browser rendering, we use Normalize, a project by Nicolas Gallagher and Jonathan Neal.

Containers

-

Easily center a page's contents by wrapping its contents in a .container. Containers set max-width at various media query breakpoints to match our grid system.

+

Easily center a page's contents by wrapping its contents in a .container. Containers set width at various media query breakpoints to match our grid system.

+

Note that, due to padding and fixed widths, containers are not nestable by default.

{% highlight html %}
... -- cgit v1.2.3 From fe58357df182b52f5905f432a3b2629c717656f1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Dec 2013 11:56:35 -0800 Subject: Fixes #10884: Adds .info variant to contextual table classes --- css.html | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) (limited to 'css.html') diff --git a/css.html b/css.html index ee9d3ec71..c120e3be3 100644 --- a/css.html +++ b/css.html @@ -1327,6 +1327,12 @@ For example, <section> should be wrapped as inline. Indicates a dangerous or potentially negative action + + + .info + + Indicates a neutral informative change or action +
@@ -1383,6 +1389,18 @@ For example, <section> should be wrapped as inline. Column content Column content + + 8 + Column content + Column content + Column content + + + 9 + Column content + Column content + Column content + @@ -1392,6 +1410,7 @@ For example, <section> should be wrapped as inline. ... ... ... +... @@ -1399,6 +1418,7 @@ For example, <section> should be wrapped as inline. ... ... ... + ... {% endhighlight %} -- cgit v1.2.3 From b1215d1b2ecd6cd3898af19ce43cc647e2ec854a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Dec 2013 12:18:13 -0800 Subject: Fixes #11193: Add kbd element styles to indicate user input via keyboard --- css.html | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index c120e3be3..561ffe448 100644 --- a/css.html +++ b/css.html @@ -1047,7 +1047,7 @@ base_url: "../"

Code

-

Inline

+

Inline

Wrap inline snippets of code with <code>.

For example, <section> should be wrapped as inline. @@ -1056,7 +1056,16 @@ base_url: "../" For example, <section> should be wrapped as inline. {% endhighlight %} -

Basic block

+

User input

+

Use the <kbd> to indicate input that is typically entered via keyboard.

+
+ To switch directories, type cd followed the name of the directory. +
+{% highlight html %} + To switch directories, type cd followed the name of the directory. +{% endhighlight %} + +

Basic block

Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

<p>Sample text here...</p>
-- cgit v1.2.3 From 6273604601c58284f49b38ae4e52533b9689437c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Dec 2013 20:52:51 -0800 Subject: Add .container-fluid variation for full-width containers and layouts /cc #10711 #9862 --- css.html | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index 561ffe448..321042a77 100644 --- a/css.html +++ b/css.html @@ -76,7 +76,7 @@ base_url: "../"

Introduction

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:

    -
  • Rows must be placed within a .container for proper alignment and padding.
    • +
  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.
  • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. LESS mixins can also be used for more semantic layouts.
    • @@ -249,6 +249,16 @@ base_url: "../"
    .col-md-6
    .col-md-6
+{% endhighlight %} + +

Example: Fluid container

+

Turn any fixed-width grid layout into a full-width layout by changing your outermost .container to .container-fluid.

+{% highlight html %} +
+
+ ... +
+
{% endhighlight %}

Example: Mobile and desktop

-- cgit v1.2.3 From a3a2525124cacae7c94a9280066cbe6eb6524059 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 11 Dec 2013 10:52:47 -0800 Subject: Fixes #11837: grid containers are fixed width now, no longer max-width --- css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index 321042a77..9f22ec10d 100644 --- a/css.html +++ b/css.html @@ -145,7 +145,7 @@ base_url: "../" Collapsed to start, horizontal above breakpoints - Max container width + Container width None (auto) 750px 970px -- cgit v1.2.3 From f1869771bc8b8e8a6c7a98385ec58e0bf0d2d98e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Dec 2013 14:18:43 -0800 Subject: Fixes #10505: Document more of LESS vars and mixins --- css.html | 460 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 460 insertions(+) (limited to 'css.html') diff --git a/css.html b/css.html index 9f22ec10d..83e0a7093 100644 --- a/css.html +++ b/css.html @@ -2710,3 +2710,463 @@ For example, <section> should be wrapped as inline.
+ + + + +
+
+

Using LESS

+
+

Bootstrap's CSS is built on LESS, a preprocessor with additional functionality like variables, mixins, and functions for compiling CSS. Thosing looking to use the source LESS files instead of our compiled CSS files can make use of the numerous variables and mixins we use throughout the framework.

+ +

Grid variables and mixins are covered within the Grid system section.

+ + +

Variables

+

Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see the Customizer.

+ +

Colors

+

Easily make use of two color schemes: grayscale and semantic. Grayscale colors provide quick access to commonly used shades of black while semantic include various colors assigned to meaningful contextual values.

+
+
+
+
+
+
+
+
+
+{% highlight css %} +@gray-darker: lighten(#000, 13.5%); // #222 +@gray-dark: lighten(#000, 20%); // #333 +@gray: lighten(#000, 33.5%); // #555 +@gray-light: lighten(#000, 60%); // #999 +@gray-lighter: lighten(#000, 93.5%); // #eee +{% endhighlight %} + +
+
+
+
+
+
+
+
+
+{% highlight css %} +@brand-primary: #428bca; +@brand-success: #5cb85c; +@brand-warning: #f0ad4e; +@brand-danger: #d9534f; +@brand-info: #5bc0de; +{% endhighlight %} + +

Use any of these color variables as they are or reassign them to more meaningful variables for your project.

+{% highlight css %} +// Use as-is +.masthead { + background-color: @brand-primary; +} + +// Reassigned variables in LESS +@alert-message-background: @brand-info; +.alert { + background-color: @alert-message-background; +} +{% endhighlight %} + +

Scaffolding

+

A handful of variables for quickly customizing key elements of your site's skeleton.

+{% highlight css %} +// Scaffolding +@body-background: #fff; +@text-color: @black-50; +{% endhighlight %} + + +

Easily style your links with the right color with only one value.

+{% highlight css %} +// Variables +@link-color: @brand-primary; +@link-color-hover: darken(@link-color, 15%); + +// Usage +a { + color: @link-color; + text-decoration: none; + + &:hover { + color: @link-color-hover; + text-decoration: underline; + } +} +{% endhighlight %} +

Note that the @link-color-hover uses a function, another awesome tool from LESS, to automagically create the right hover color. You can use darken, lighten, saturate, and desaturate.

+ +

Typography

+

Easily set your type face, text size, leading, and more with a few quick variables. Bootstrap makes use of these as well to provide easy typographic mixins as well.

+{% highlight css %} +@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; +@font-family-serif: Georgia, "Times New Roman", Times, serif; +@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; +@font-family-base: @font-family-sans-serif; + +@font-size-base: 14px; +@font-size-large: ceil((@font-size-base * 1.25)); // ~18px +@font-size-small: ceil((@font-size-base * 0.85)); // ~12px + +@font-size-h1: floor((@font-size-base * 2.6)); // ~36px +@font-size-h2: floor((@font-size-base * 2.15)); // ~30px +@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px +@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px +@font-size-h5: @font-size-base; +@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px + +@line-height-base: 1.428571429; // 20/14 +@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px + +@headings-font-family: inherit; +@headings-font-weight: 500; +@headings-line-height: 1.1; +@headings-color: inherit; +{% endhighlight %} + +

Icons

+

Two quick variables for customizing the location and filename of your icons.

+{% highlight css %} +@icon-font-path: "../fonts/"; +@icon-font-name: "glyphicons-halflings-regular"; +{% endhighlight %}} + +

Components

+

Components throughout Bootstrap make use of some default variables for setting common values. Here are the most commonly used.

+{% highlight css %} +@padding-base-vertical: 6px; +@padding-base-horizontal: 12px; + +@padding-large-vertical: 10px; +@padding-large-horizontal: 16px; + +@padding-small-vertical: 5px; +@padding-small-horizontal: 10px; + +@padding-xs-vertical: 1px; +@padding-xs-horizontal: 5px; + +@line-height-large: 1.33; +@line-height-small: 1.5; + +@border-radius-base: 4px; +@border-radius-large: 6px; +@border-radius-small: 3px; + +@component-active-color: #fff; +@component-active-bg: @brand-primary; + +@caret-width-base: 4px; +@caret-width-large: 5px; +{% endhighlight %}} + + +

Vendor mixins

+

Vendor mixins are mixins to help support multiple browsers by including all relevant vendor prefixs in your compiled CSS.

+ + +

Box-sizing

+

Reset your components' box model with a single mixin. For context, see this helpful article from Mozilla.

+{% highlight css %} +.box-sizing(@box-model) { + -webkit-box-sizing: @box-model; // Safari <= 5 + -moz-box-sizing: @box-model; // Firefox <= 19 + box-sizing: @box-model; +} +{% endhighlight %} + +

Rounded corners

+

Today all modern browsers support the non-prefixed border-radius property. As such, there is no .border-radius() mixin, but Preboot does include shortcuts for quickly rounding two corners on a particular side of an object.

+{% highlight css %} +.border-top-radius(@radius) { + border-top-right-radius: @radius; + border-top-left-radius: @radius; +} +.border-right-radius(@radius) { + border-bottom-right-radius: @radius; + border-top-right-radius: @radius; +} +.border-bottom-radius(@radius) { + border-bottom-right-radius: @radius; + border-bottom-left-radius: @radius; +} +.border-left-radius(@radius) { + border-bottom-left-radius: @radius; + border-top-left-radius: @radius; +} +{% endhighlight %} + +

Box (Drop) shadows

+

If your target audience is using the latest and greatest browsers and devices, be sure to just use the box-shadow 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 -webkit prefix.

+

Be sure to use rgba() colors in your box shadows so they blend as seamlessly as possible with backgrounds.

+{% highlight css %} +.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) { + -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1 + box-shadow: @shadow; +} +{% endhighlight %} + +

Transitions

+

Three mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.

+{% highlight css %} +.transition(@transition) { + -webkit-transition: @transition; + transition: @transition; +} +.transition-property(@transition-property) { + -webkit-transition-property: @transition-property; + transition-property: @transition-property; +} +.transition-delay(@transition-delay) { + -webkit-transition-delay: @transition-delay; + transition-delay: @transition-delay; +} +.transition-duration(@transition-duration) { + -webkit-transition-duration: @transition-duration; + transition-duration: @transition-duration; +} +.transition-transform(@transition) { + -webkit-transition: -webkit-transform @transition; + -moz-transition: -moz-transform @transition; + -o-transition: -o-transform @transition; + transition: transform @transition; +} +{% endhighlight %} + +

Transformations

+

Rorate, scale, translate (move), or skew any object.

+{% highlight css %} +.rotate(@degrees) { + -webkit-transform: rotate(@degrees); + -ms-transform: rotate(@degrees); // IE9 only + transform: rotate(@degrees); +} +.scale(@ratio; @ratio-y...) { + -webkit-transform: scale(@ratio, @ratio-y); + -ms-transform: scale(@ratio, @ratio-y); // IE9 only + transform: scale(@ratio, @ratio-y); +} +.translate(@x; @y) { + -webkit-transform: translate(@x, @y); + -ms-transform: translate(@x, @y); // IE9 only + transform: translate(@x, @y); +} +.skew(@x; @y) { + -webkit-transform: skew(@x, @y); + -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+ + transform: skew(@x, @y); +} +.translate3d(@x; @y; @z) { + -webkit-transform: translate3d(@x, @y, @z); + transform: translate3d(@x, @y, @z); +} + +.rotateX(@degrees) { + -webkit-transform: rotateX(@degrees); + -ms-transform: rotateX(@degrees); // IE9 only + transform: rotateX(@degrees); +} +.rotateY(@degrees) { + -webkit-transform: rotateY(@degrees); + -ms-transform: rotateY(@degrees); // IE9 only + transform: rotateY(@degrees); +} +.perspective(@perspective) { + -webkit-perspective: @perspective; + -moz-perspective: @perspective; + perspective: @perspective; +} +.perspective-origin(@perspective) { + -webkit-perspective-origin: @perspective; + -moz-perspective-origin: @perspective; + perspective-origin: @perspective; +} +.transform-origin(@origin) { + -webkit-transform-origin: @origin; + -moz-transform-origin: @origin; + -ms-transform-origin: @origin; // IE9 only + transform-origin: @origin; +} +{% endhighlight %} + +

Opacity

+

Set the opacity for all browsers and provide a filter fallback for IE8.

+{% highlight css %} +.opacity(@opacity) { + opacity: @opacity; + // IE8 filter + @opacity-ie: (@opacity * 100); + filter: ~"alpha(opacity=@{opacity-ie})"; +} +{% endhighlight %} + +

Placeholder text

+

Provide context for form controls within each field.

+{% highlight css %} +.placeholder(@color: @input-color-placeholder) { + &:-moz-placeholder { color: @color; } // Firefox 4-18 + &::-moz-placeholder { color: @color; } // Firefox 19+ + &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+ + &::-webkit-input-placeholder { color: @color; } // Safari and Chrome +} +{% endhighlight %} + +

Columns

+

Generate columns via CSS within a single element.

+{% highlight css %} +.content-columns(@width; @count; @gap) { + -webkit-column-width: @width; + -moz-column-width: @width; + column-width: @width; + -webkit-column-count: @count; + -moz-column-count: @count; + column-count: @count; + -webkit-column-gap: @gap; + -moz-column-gap: @gap; + column-gap: @gap; +} +{% endhighlight %} + +

Gradients

+

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.

+{% highlight css %} +#gradient > .vertical(#333; #000); +#gradient > .horizontal(#333; #000); +#gradient > .radial(#333; #000); +{% endhighlight %} +

You can also specify the angle of a standard two-color, linear gradient:

+{% highlight css %} +#gradient > .directional(#333; #000; 45deg); +{% endhighlight %} +

If you need a barber-stripe style gradient, that's easy, too. Just specify a single color and we'll overlay a translucent white stripe.

+{% highlight css %} +#gradient > .striped(#333; #000; 45deg); +{% endhighlight %} +

Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a decimal value like 0.25), and the third color with these mixins:

+{% highlight css %} +#gradient > .vertical-three-colors(#777; #333; .25; #000); +#gradient > .horizontal-three-colors(#777; #333; .25; #000); +{% endhighlight %} +

Heads up! Should you ever need to remove a gradient, be sure to remove any IE-specific filter you may have added. You can do that by using .reset-filter() mixin alignside background-image: none;.

+ + +

Utility mixins

+

Utility mixins are mixins that combine otherwise unrelated CSS properties to achieve a specific goal or task.

+ +

Clearfix

+

Forget adding class="clearfix" to any element and instead add the .clearfix() mixin where appropriate. Uses the micro clearfix from Nicolas Gallager.

+{% highlight css %} +// Mixin +.clearfix() { + &:before, + &:after { + content: " "; + display: table; + } + &:after { + clear: both; + } +} + +// Usage +.container { + .clearfix(); +} +{% endhighlight %} + +

Horizontal centering

+

Quickly center any element within its parent. Requires width or max-width to be set.

+{% highlight css %} +// Mixin +.center-block() { + display: block; + margin-left: auto; + margin-right: auto; +} + +// Usage +.container { + width: 940px; + .center-block(); +} +{% endhighlight %} + +

Sizing helpers

+

Specify the dimensions of an object more easily.

+{% highlight css %} +// Mixins +.size(@width; @height) { + width: @width; + height: @height; +} +.square(@size) { + .size(@size; @size); +} + +// Usage +.image { .size(400px; 300px); } +.avatar { .square(48px); } +{% endhighlight %} + +

Resizable textareas

+

Easily configure the resize options for any textarea, or any other element. Defaults to normal browser behavior (both).

+{% highlight css %} +.resizable(@direction: both) { + // Options: horizontal, vertical, both + resize: @direction; + // Safari fix + overflow: auto; +} +{% endhighlight %} + +

Truncating text

+

Easily truncate text with an ellipsis with a single mixin. Requires element to be block or inline-block level.

+{% highlight css %} +// Mixin +.text-truncate() { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +// Usage +.branch-name { + display: inline-block; + max-width: 200px; + .text-truncate(); +} +{% endhighlight %} + +

Retina images

+

Specify two image paths and the @1x image dimensions, and Preboot will provide an @2x media query. If you have many images to serve, consider writing your retina image CSS manually in a single media query.

+{% highlight css %} +.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) { + background-image: url("@{file-1x}"); + + @media + only screen and (-webkit-min-device-pixel-ratio: 2), + only screen and ( min--moz-device-pixel-ratio: 2), + only screen and ( -o-min-device-pixel-ratio: 2/1), + only screen and ( min-device-pixel-ratio: 2), + only screen and ( min-resolution: 192dpi), + only screen and ( min-resolution: 2dppx) { + background-image: url("@{file-2x}"); + background-size: @width-1x @height-1x; + } +} + +// Usage +.jumbotron { + .retina-image("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px); +} +{% endhighlight %} +
-- cgit v1.2.3 From 88a8669656bd519369dde745b4964c439b4e09a5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Dec 2013 19:31:03 -0800 Subject: document #11326 --- css.html | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) (limited to 'css.html') diff --git a/css.html b/css.html index 83e0a7093..4edcc3a61 100644 --- a/css.html +++ b/css.html @@ -2996,6 +2996,39 @@ a { -ms-transform-origin: @origin; // IE9 only transform-origin: @origin; } +{% endhighlight %} + +

Animations

+

A single mixin for using all CSS3's animation properties in one declarations and other mixins for individual properties.

+{% highlight css %} +.animation(@animation) { + -webkit-animation: @animation; + animation: @animation; +} +.animation-name(@name) { + -webkit-animation-name: @name; + animation-name: @name; +} +.animation-duration(@duration) { + -webkit-animation-duration: @duration; + animation-duration: @duration; +} +.animation-timing-function(@timing-function) { + -webkit-animation-timing-function: @timing-function; + animation-timing-function: @timing-function; +} +.animation-delay(@delay) { + -webkit-animation-delay: @delay; + animation-delay: @delay; +} +.animation-iteration-count(@iteration-count) { + -webkit-animation-iteration-count: @iteration-count; + animation-iteration-count: @iteration-count; +} +.animation-direction(@direction) { + -webkit-animation-direction: @direction; + animation-direction: @direction; +} {% endhighlight %}

Opacity

-- cgit v1.2.3 From 4da03c83c5f850afc3211438227ba16d34c580e1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Dec 2013 19:31:20 -0800 Subject: correct bookmark prefix --- css.html | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 4edcc3a61..ab2902042 100644 --- a/css.html +++ b/css.html @@ -2874,7 +2874,7 @@ a {

Vendor mixins are mixins to help support multiple browsers by including all relevant vendor prefixs in your compiled CSS.

-

Box-sizing

+

Box-sizing

Reset your components' box model with a single mixin. For context, see this helpful article from Mozilla.

{% highlight css %} .box-sizing(@box-model) { @@ -2884,7 +2884,7 @@ a { } {% endhighlight %} -

Rounded corners

+

Rounded corners

Today all modern browsers support the non-prefixed border-radius property. As such, there is no .border-radius() mixin, but Preboot does include shortcuts for quickly rounding two corners on a particular side of an object.

{% highlight css %} .border-top-radius(@radius) { @@ -2905,7 +2905,7 @@ a { } {% endhighlight %} -

Box (Drop) shadows

+

Box (Drop) shadows

If your target audience is using the latest and greatest browsers and devices, be sure to just use the box-shadow 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 -webkit prefix.

Be sure to use rgba() colors in your box shadows so they blend as seamlessly as possible with backgrounds.

{% highlight css %} @@ -2915,7 +2915,7 @@ a { } {% endhighlight %} -

Transitions

+

Transitions

Three mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.

{% highlight css %} .transition(@transition) { @@ -2942,7 +2942,7 @@ a { } {% endhighlight %} -

Transformations

+

Transformations

Rorate, scale, translate (move), or skew any object.

{% highlight css %} .rotate(@degrees) { @@ -2998,7 +2998,7 @@ a { } {% endhighlight %} -

Animations

+

Animations

A single mixin for using all CSS3's animation properties in one declarations and other mixins for individual properties.

{% highlight css %} .animation(@animation) { @@ -3031,7 +3031,7 @@ a { } {% endhighlight %} -

Opacity

+

Opacity

Set the opacity for all browsers and provide a filter fallback for IE8.

{% highlight css %} .opacity(@opacity) { @@ -3042,7 +3042,7 @@ a { } {% endhighlight %} -

Placeholder text

+

Placeholder text

Provide context for form controls within each field.

{% highlight css %} .placeholder(@color: @input-color-placeholder) { @@ -3053,7 +3053,7 @@ a { } {% endhighlight %} -

Columns

+

Columns

Generate columns via CSS within a single element.

{% highlight css %} .content-columns(@width; @count; @gap) { @@ -3069,7 +3069,7 @@ a { } {% endhighlight %} -

Gradients

+

Gradients

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.

{% highlight css %} #gradient > .vertical(#333; #000); @@ -3095,7 +3095,7 @@ a {

Utility mixins

Utility mixins are mixins that combine otherwise unrelated CSS properties to achieve a specific goal or task.

-

Clearfix

+

Clearfix

Forget adding class="clearfix" to any element and instead add the .clearfix() mixin where appropriate. Uses the micro clearfix from Nicolas Gallager.

{% highlight css %} // Mixin @@ -3116,7 +3116,7 @@ a { } {% endhighlight %} -

Horizontal centering

+

Horizontal centering

Quickly center any element within its parent. Requires width or max-width to be set.

{% highlight css %} // Mixin @@ -3133,7 +3133,7 @@ a { } {% endhighlight %} -

Sizing helpers

+

Sizing helpers

Specify the dimensions of an object more easily.

{% highlight css %} // Mixins @@ -3150,7 +3150,7 @@ a { .avatar { .square(48px); } {% endhighlight %} -

Resizable textareas

+

Resizable textareas

Easily configure the resize options for any textarea, or any other element. Defaults to normal browser behavior (both).

{% highlight css %} .resizable(@direction: both) { @@ -3161,7 +3161,7 @@ a { } {% endhighlight %} -

Truncating text

+

Truncating text

Easily truncate text with an ellipsis with a single mixin. Requires element to be block or inline-block level.

{% highlight css %} // Mixin @@ -3179,7 +3179,7 @@ a { } {% endhighlight %} -

Retina images

+

Retina images

Specify two image paths and the @1x image dimensions, and Preboot will provide an @2x media query. If you have many images to serve, consider writing your retina image CSS manually in a single media query.

{% highlight css %} .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) { -- cgit v1.2.3 From 67b536ea51108c655ac59f1371f11fd8867eaf16 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Dec 2013 21:25:57 -0800 Subject: change class name --- css.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index ab2902042..0acf8830e 100644 --- a/css.html +++ b/css.html @@ -635,27 +635,27 @@ base_url: "../"

h1. Bootstrap heading

- Semibold 36px + Semibold 36px

h2. Bootstrap heading

- Semibold 30px + Semibold 30px

h3. Bootstrap heading

- Semibold 24px + Semibold 24px

h4. Bootstrap heading

- Semibold 18px + Semibold 18px
h5. Bootstrap heading
- Semibold 14px + Semibold 14px
h6. Bootstrap heading
- Semibold 12px + Semibold 12px -- cgit v1.2.3 From 072ccd4ddad1dcf642e27497c5253ce578182719 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Dec 2013 21:40:16 -0800 Subject: Fixes #11572: Add contextual background-color classes to match text classes; move both sets of classes to Helper Classes section of the CSS docs --- css.html | 64 +++++++++++++++++++++++++++++++++++++++++----------------------- 1 file changed, 41 insertions(+), 23 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 0acf8830e..778747e69 100644 --- a/css.html +++ b/css.html @@ -782,29 +782,6 @@ base_url: "../"

Right aligned text.

{% endhighlight %} -

Emphasis classes

-

Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.

-
-

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

-

Nullam id dolor id nibh ultricies vehicula ut id elit.

-

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

-

Maecenas sed diam eget risus varius blandit sit amet non magna.

-

Etiam porta sem malesuada magna mollis euismod.

-

Donec ullamcorper nulla non metus auctor fringilla.

-
-{% highlight html %} -

...

-

...

-

...

-

...

-

...

-

...

-{% endhighlight %} -
-

Dealing with specificity

-

Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <span> with the class.

-
-

Abbreviations

@@ -2323,6 +2300,47 @@ For example, <section> should be wrapped as inline.

Helper classes

+

Contextual colors

+

Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.

+
+

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

+

Nullam id dolor id nibh ultricies vehicula ut id elit.

+

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

+

Maecenas sed diam eget risus varius blandit sit amet non magna.

+

Etiam porta sem malesuada magna mollis euismod.

+

Donec ullamcorper nulla non metus auctor fringilla.

+
+{% highlight html %} +

...

+

...

+

...

+

...

+

...

+

...

+{% endhighlight %} +
+

Dealing with specificity

+

Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <span> with the class.

+
+ +

Contextual backgrounds

+

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.

+
+

Nullam id dolor id nibh ultricies vehicula ut id elit.

+

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

+

Maecenas sed diam eget risus varius blandit sit amet non magna.

+

Etiam porta sem malesuada magna mollis euismod.

+

Donec ullamcorper nulla non metus auctor fringilla.

+
+{% highlight html %} +

...

+

...

+

...

+

...

+

...

+

...

+{% endhighlight %} +

Close icon

Use the generic close icon for dismissing content like modals and alerts.

-- cgit v1.2.3 From ae170a5930106b5d36cc2a0ec47085f51c2c93f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zlatan=20Vasovi=C4=87?= Date: Sun, 15 Dec 2013 11:47:23 +0100 Subject: Fix wrong variable name --- css.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 778747e69..8c8e30a7a 100644 --- a/css.html +++ b/css.html @@ -2799,8 +2799,8 @@ For example, <section> should be wrapped as inline.

A handful of variables for quickly customizing key elements of your site's skeleton.

{% highlight css %} // Scaffolding -@body-background: #fff; -@text-color: @black-50; +@body-bg: #fff; +@text-color: @black-50; {% endhighlight %} -- cgit v1.2.3 From a13d459491d800fe182a9217da9dd740cd6b57a9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 15 Dec 2013 13:08:17 -0800 Subject: Clarify number of columns in nested grid --- css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index 8c8e30a7a..4bf8cf7ab 100644 --- a/css.html +++ b/css.html @@ -403,7 +403,7 @@ base_url: "../"

Nesting columns

-

To nest your content with the default grid, add a new .row and set of .col-md-* columns within an existing .col-md-* column. Nested rows should include a set of columns that add up to 12.

+

To nest your content with the default grid, add a new .row and set of .col-md-* columns within an existing .col-md-* column. Nested rows should include a set of columns that add up to 12 or less.

Level 1: .col-md-9 -- cgit v1.2.3