From 7c6e4a231c97a3e55ffbfacd5c131554219f23c6 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Thu, 30 Jan 2014 10:49:43 -0800 Subject: rm outdated note about lack of .col-{xs,sm}-offset-0; fixes #12439 --- docs/css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 3b2cdf813..74f46cac0 100644 --- a/docs/css.html +++ b/docs/css.html @@ -355,7 +355,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
.col-xs-6 .col-sm-3
{% endhighlight %} -

In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls. Those resets are available for medium and large grid tiers only, since they start only at the (second) small grid tier. See this in action in the grid example.

+

In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls. See this in action in the grid example.

{% highlight html %}
.col-sm-5 .col-md-6
-- cgit v1.2.3 From e430675d147bb9e0991e43a4fd86bf6bdf3deda5 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Thu, 30 Jan 2014 14:46:58 -0800 Subject: use correct+newer name for retina mixin in docs; fixes #12450 --- docs/css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 74f46cac0..0f2d79c27 100644 --- a/docs/css.html +++ b/docs/css.html @@ -3283,7 +3283,7 @@ a { // Usage .jumbotron { - .retina-image("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px); + .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px); } {% endhighlight %}
-- cgit v1.2.3 From 1802cedbc11d9468705e9289297616f785e33a8d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 31 Jan 2014 13:12:31 -0800 Subject: Use scss option instead of css for better highlighting --- docs/css.html | 76 +++++++++++++++++++++++++++++------------------------------ 1 file changed, 38 insertions(+), 38 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 0f2d79c27..b4eaabe9b 100644 --- a/docs/css.html +++ b/docs/css.html @@ -89,7 +89,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e

Media queries

We use the following media queries in our Less files to create the key breakpoints in our grid system.

-{% highlight css %} +{% highlight scss %} /* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ @@ -103,7 +103,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e @media (min-width: @screen-lg-min) { ... } {% endhighlight %}

We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices.

-{% highlight css %} +{% highlight scss %} @media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @@ -449,7 +449,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e

Variables

Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.

-{% highlight css %} +{% highlight scss %} @grid-columns: 12; @grid-gutter-width: 30px; @grid-float-breakpoint: 768px; @@ -457,7 +457,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e

Mixins

Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.

-{% highlight css %} +{% highlight scss %} // Creates a wrapper for a series of columns .make-row(@gutter: @grid-gutter-width) { // Then clear the floated columns @@ -593,7 +593,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e

Example usage

You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.

-{% highlight css %} +{% highlight scss %} .wrapper { .make-row(); } @@ -2433,7 +2433,7 @@ For example, <section> should be wrapped as inline.
...
...
{% endhighlight %} -{% highlight css %} +{% highlight scss %} // Classes .pull-left { float: left !important; @@ -2462,7 +2462,7 @@ For example, <section> should be wrapped as inline. {% highlight html %}
...
{% endhighlight %} -{% highlight css %} +{% highlight scss %} // Classes .center-block { display: block; @@ -2483,7 +2483,7 @@ For example, <section> should be wrapped as inline.
...
{% endhighlight %} -{% highlight css %} +{% highlight scss %} // Mixin itself .clearfix() { &:before, @@ -2511,7 +2511,7 @@ For example, <section> should be wrapped as inline.
...
{% endhighlight %} -{% highlight css %} +{% highlight scss %} // Classes .show { display: block !important; @@ -2539,7 +2539,7 @@ For example, <section> should be wrapped as inline. {% highlight html %} Skip to main content {% endhighlight %} -{% highlight css %} +{% highlight scss %} // Usage as a Mixin .skip-navigation { .sr-only(); @@ -2552,7 +2552,7 @@ For example, <section> should be wrapped as inline. {% highlight html %}

Custom heading

{% endhighlight %} - {% highlight css %} + {% highlight scss %} // Usage as a Mixin .heading { .text-hide(); @@ -2821,7 +2821,7 @@ For example, <section> should be wrapped as inline.
-{% highlight css %} +{% highlight scss %} @gray-darker: lighten(#000, 13.5%); // #222 @gray-dark: lighten(#000, 20%); // #333 @gray: lighten(#000, 33.5%); // #555 @@ -2838,7 +2838,7 @@ For example, <section> should be wrapped as inline.
-{% highlight css %} +{% highlight scss %} @brand-primary: #428bca; @brand-success: #5cb85c; @brand-info: #5bc0de; @@ -2847,7 +2847,7 @@ For example, <section> should be wrapped as inline. {% endhighlight %}

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

-{% highlight css %} +{% highlight scss %} // Use as-is .masthead { background-color: @brand-primary; @@ -2862,7 +2862,7 @@ For example, <section> should be wrapped as inline.

Scaffolding

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

-{% highlight css %} +{% highlight scss %} // Scaffolding @body-bg: #fff; @text-color: @black-50; @@ -2870,7 +2870,7 @@ For example, <section> should be wrapped as inline.

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

-{% highlight css %} +{% highlight scss %} // Variables @link-color: @brand-primary; @link-color-hover: darken(@link-color, 15%); @@ -2890,7 +2890,7 @@ a {

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.

-{% highlight css %} +{% highlight scss %} @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; @@ -2918,14 +2918,14 @@ a {

Icons

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

-{% highlight css %} +{% highlight scss %} @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 %} +{% highlight scss %} @padding-base-vertical: 6px; @padding-base-horizontal: 12px; @@ -2959,7 +2959,7 @@ a {

Box-sizing

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

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

Rounded corners

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

-{% highlight css %} +{% highlight scss %} .border-top-radius(@radius) { border-top-right-radius: @radius; border-top-left-radius: @radius; @@ -2992,7 +2992,7 @@ a {

If your target audience is using the latest and greatest browsers and devices, be sure to just use the box-shadow property on its own. If you need support for older Android (pre-v4) and iOS devices (pre-iOS 5), use the deprecated mixin to pick up the required -webkit prefix.

The mixin is deprecated as of v3.1.0, since Bootstrap doesn't officially support the outdated platforms that don't support the standard property. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.

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

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

Transitions

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

-{% highlight css %} +{% highlight scss %} .transition(@transition) { -webkit-transition: @transition; transition: @transition; @@ -3028,7 +3028,7 @@ a {

Transformations

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

-{% highlight css %} +{% highlight scss %} .rotate(@degrees) { -webkit-transform: rotate(@degrees); -ms-transform: rotate(@degrees); // IE9 only @@ -3084,7 +3084,7 @@ a {

Animations

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

-{% highlight css %} +{% highlight scss %} .animation(@animation) { -webkit-animation: @animation; animation: @animation; @@ -3117,7 +3117,7 @@ a {

Opacity

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

-{% highlight css %} +{% highlight scss %} .opacity(@opacity) { opacity: @opacity; // IE8 filter @@ -3128,7 +3128,7 @@ a {

Placeholder text

Provide context for form controls within each field.

-{% highlight css %} +{% highlight scss %} .placeholder(@color: @input-color-placeholder) { &:-moz-placeholder { color: @color; } // Firefox 4-18 &::-moz-placeholder { color: @color; } // Firefox 19+ @@ -3139,7 +3139,7 @@ a {

Columns

Generate columns via CSS within a single element.

-{% highlight css %} +{% highlight scss %} .content-columns(@width; @count; @gap) { -webkit-column-width: @width; -moz-column-width: @width; @@ -3155,21 +3155,21 @@ a {

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 %} +{% highlight scss %} #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 %} +{% highlight scss %} #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 %} +{% highlight scss %} #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 %} +{% highlight scss %} #gradient > .vertical-three-colors(#777; #333; .25; #000); #gradient > .horizontal-three-colors(#777; #333; .25; #000); {% endhighlight %} @@ -3181,7 +3181,7 @@ a {

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 %} +{% highlight scss %} // Mixin .clearfix() { &:before, @@ -3202,7 +3202,7 @@ a {

Horizontal centering

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

-{% highlight css %} +{% highlight scss %} // Mixin .center-block() { display: block; @@ -3219,7 +3219,7 @@ a {

Sizing helpers

Specify the dimensions of an object more easily.

-{% highlight css %} +{% highlight scss %} // Mixins .size(@width; @height) { width: @width; @@ -3236,7 +3236,7 @@ a {

Resizable textareas

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

-{% highlight css %} +{% highlight scss %} .resizable(@direction: both) { // Options: horizontal, vertical, both resize: @direction; @@ -3247,7 +3247,7 @@ a {

Truncating text

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

-{% highlight css %} +{% highlight scss %} // Mixin .text-truncate() { overflow: hidden; @@ -3265,7 +3265,7 @@ a {

Retina images

Specify two image paths and the @1x image dimensions, and Bootstrap 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 %} +{% highlight scss %} .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) { background-image: url("@{file-1x}"); -- cgit v1.2.3 From 813467ddaf9d007a2a14273db80435faba401222 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sat, 1 Feb 2014 00:11:23 -0800 Subject: rm callout about creating .container-fluid-alikes now that .container-fluid has been added --- docs/css.html | 5 ----- 1 file changed, 5 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index b4eaabe9b..1dc9c1da5 100644 --- a/docs/css.html +++ b/docs/css.html @@ -82,11 +82,6 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e

Look to the examples for applying these principles to your code.

-
-

Grids and full-width layouts

-

Folks looking to create fully fluid layouts (meaning your site stretches the entire width of the viewport) must wrap their grid content in a containing element with padding: 0 15px; to offset the margin: 0 -15px; used on .rows.

-
-

Media queries

We use the following media queries in our Less files to create the key breakpoints in our grid system.

{% highlight scss %} -- cgit v1.2.3 From d6f25e13ec4389fcb94ef16cd13eacf4d5aa173b Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sat, 1 Feb 2014 00:26:46 -0800 Subject: mv .img-responsive docs from Overview to Images section --- docs/css.html | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index b4eaabe9b..2a2d50097 100644 --- a/docs/css.html +++ b/docs/css.html @@ -31,12 +31,6 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e

You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, we don't recommend this on every site, so use caution!

{% highlight html %} -{% endhighlight %} - -

Responsive images

-

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

-{% highlight html %} -Responsive image {% endhighlight %} @@ -2337,6 +2331,13 @@ For example, <section> should be wrapped as inline.

Images

+

Responsive images

+

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

+{% highlight html %} +Responsive image +{% endhighlight %} + +

Image shapes

Add classes to an <img> element to easily style images in any project.

Cross-browser compatibility

@@ -2352,11 +2353,6 @@ For example, <section> should be wrapped as inline. ... ... {% endhighlight %} - -
-

Responsive images

-

Looking for how to make images more responsive? Check out the responsive images section up top.

-
-- cgit v1.2.3 From 6db1a3f9097c0375350ce133548de70a87572e59 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zlatan=20Vasovi=C4=87?= Date: Fri, 7 Feb 2014 13:40:32 +0100 Subject: Fix .text-truncate() typo --- docs/css.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 1c2c85170..f5e6596f3 100644 --- a/docs/css.html +++ b/docs/css.html @@ -3240,7 +3240,7 @@ a {

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

{% highlight scss %} // Mixin -.text-truncate() { +.text-overflow() { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -3250,7 +3250,7 @@ a { .branch-name { display: inline-block; max-width: 200px; - .text-truncate(); + .text-overflow(); } {% endhighlight %} -- cgit v1.2.3 From 13b4e7a1a8b9be8793c59e3c1da4016ad0974b56 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 8 Feb 2014 17:19:45 -0800 Subject: Mention limitation of form validation feedback icons with input groups --- docs/css.html | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index f5e6596f3..6651215f5 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1977,6 +1977,10 @@ For example, <section> should be wrapped as inline.

With optional icons

You can also add optional feedback icons with the addition of an extra class and the right icon.

+
+

Icons and input groups

+

When using the feedback icons, be aware that manual positioning may be required for input groups with an add-on on the right. Adjust the right: 0; to an appropriate pixel value depending on the width of your addon.

+
-- cgit v1.2.3