From dc5917bedfda321b72310209d2807ea10347f7ed Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 10 Feb 2014 10:46:17 -0800 Subject: update docs to include+use .sr-only-focusable --- docs/css.html | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 2a2d50097..7ed142cc8 100644 --- a/docs/css.html +++ b/docs/css.html @@ -2530,15 +2530,16 @@ For example, <section> should be wrapped as inline. {% endhighlight %} -

Screen reader content

-

Hide an element to all devices except screen readers with .sr-only. Necessary for following accessibility best practices. Can also be used as a mixin.

+

Screen reader and keyboard navigation content

+

Hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following accessibility best practices. Can also be used as mixins.

{% highlight html %} -Skip to main content +Skip to main content {% endhighlight %} {% highlight scss %} // Usage as a Mixin .skip-navigation { .sr-only(); + .sr-only-focusable(); } {% endhighlight %} -- cgit v1.2.3 From a083f0deb77dd479a7690a4ab90f73f7f7f375cd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 22 Feb 2014 14:19:00 -0800 Subject: Fixes #12808: Correct grid column values listed in Grid Options --- docs/css.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 32204c4f4..de995e16b 100644 --- a/docs/css.html +++ b/docs/css.html @@ -157,9 +157,9 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e Column width Auto - 60px - 78px - 95px + ~62px + ~81px + ~97px Gutter width -- cgit v1.2.3 From a6fb770ebee4394d8b946636a738e3829cc59b28 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 24 Feb 2014 15:10:46 -0800 Subject: move grid classes cascade explanation into main grid docs section --- 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 de995e16b..e1af6985e 100644 --- a/docs/css.html +++ b/docs/css.html @@ -79,6 +79,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
  • 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.
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
    • +
  • Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.

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

    @@ -180,7 +181,6 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e -

    Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.

    Example: Stacked-to-horizontal

    Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.

    -- cgit v1.2.3 From 559b90f944fe9cfd463c1be3f89cf5d7cf7f8cb4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 3 Mar 2014 23:50:04 -0800 Subject: Rename RTL files and add some basic docs --- docs/css.html | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index e1af6985e..8baf8f42d 100644 --- a/docs/css.html +++ b/docs/css.html @@ -3345,3 +3345,28 @@ a { Bootstrap for Sass

    + + + + +
    +

    RTL

    +

    As of Bootstrap 3.2, a right-to-left version of Bootstrap ships as part of the repository. It's powered by Twitter's CSS Flip project and is generated via our Gruntfile.

    + +

    How to use

    +

    Bootstrap is by default a left-to-right project. For right-to-left projects, you'll need to set your language and replace the default Bootstrap CSS with an RTL version. First, set your language and text direction:

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

    Then, include the right-to-left CSS file in place of the default Bootstrap CSS:

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

    Alternatively, you may use the minified RTL file, bootstrap-rtl.min.css.

    + +

    CSS Flip

    +

    CSS Flip is a project for converting left-to-right CSS files into right-to-left CSS files. We use it in our Gruntfile to automate the generation of Bootstrap's RTL CSS files.

    +
    -- cgit v1.2.3 From a0ac99efbf201f03106f392bce7045d8563064d9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 4 Mar 2014 14:48:52 -0800 Subject: docs for #12873 --- 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 8baf8f42d..614b74050 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1984,8 +1984,8 @@ For example, <section> should be wrapped as inline.

    With optional icons

    You can also add optional feedback icons with the addition of .has-feedback 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.

    +

    Icons, labels, and input groups

    +

    Manual positioning of feedback icons is required for input groups with an add-on on the right and inputs without a label. For input groups, adjust the right value to an appropriate pixel value depending on the width of your addon. For labels, adjust the topvalue.

    -- cgit v1.2.3 From e418377b119cbe8604370adcc17ab3de76b2a415 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 4 Mar 2014 15:16:38 -0800 Subject: Fixes #12697: Document readonly inputs --- docs/css.html | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 614b74050..9af1eeffc 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1878,7 +1878,7 @@ For example, <section> should be wrapped as inline.

    Disabled inputs

    -

    Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

    +

    Add the disabled boolean attribute on an input to prevent user input and trigger a slightly different look.

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

    Readonly inputs

    +

    Add the readonly boolean attribute on an input to prevent user input and style the input as disabled.

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

    Validation states

    Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.

    -- cgit v1.2.3 From af5a2197183754629a8ff09c23b043c3c9711a1f Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Wed, 5 Mar 2014 14:17:20 -0800 Subject: fix #12936 --- 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 9af1eeffc..bbfb515aa 100644 --- a/docs/css.html +++ b/docs/css.html @@ -3179,7 +3179,7 @@ a { {% 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 scss %} -#gradient > .striped(#333; #000; 45deg); +#gradient > .striped(#333; 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 scss %} -- cgit v1.2.3 From 705ff7f2275ca823f71ca8dfba27a3b68119a2a4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 6 Mar 2014 23:18:13 -0800 Subject: Moving the embed to it's own CSS file, moving the docs to the Components page with an example, fixing a Glyhpicons list problem in the docs --- docs/css.html | 16 ---------------- 1 file changed, 16 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 3f9fd2061..bbfb515aa 100644 --- a/docs/css.html +++ b/docs/css.html @@ -2570,22 +2570,6 @@ For example, <section> should be wrapped as inline. .heading { .text-hide(); } -{% endhighlight %} - - -

    Embeds responsive

    -

    Allows browsers to determine videos or slideshow dimensions based on the width of their containing block to create an intrinsic ratio that will properly scale on any device.

    -

    Rules are directly apply to <iframe>, <embed> and <object> elements, optionally use of an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.

    -{% highlight html %} - -
    - -
    - - -
    - -
    {% endhighlight %}
    -- cgit v1.2.3 From cb7eb674accd24b6b73f26ef23cf4a301b6ebfaf Mon Sep 17 00:00:00 2001 From: Bas Bosman Date: Sat, 22 Feb 2014 11:17:58 +0100 Subject: Add autoprefixer --- docs/css.html | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index bbfb515aa..9cd635cd7 100644 --- a/docs/css.html +++ b/docs/css.html @@ -2972,6 +2972,7 @@ a {

    Box-sizing

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

    +

    The mixin is deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.

    {% highlight scss %} .box-sizing(@box-model) { -webkit-box-sizing: @box-model; // Safari <= 5 @@ -3014,6 +3015,7 @@ a {

    Transitions

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

    +

    The mixins are deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.

    {% highlight scss %} .transition(@transition) { -webkit-transition: @transition; @@ -3041,6 +3043,7 @@ a {

    Transformations

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

    +

    The mixins are deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.

    {% highlight scss %} .rotate(@degrees) { -webkit-transform: rotate(@degrees); @@ -3097,6 +3100,7 @@ a {

    Animations

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

    +

    The mixins are deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.

    {% highlight scss %} .animation(@animation) { -webkit-animation: @animation; @@ -3143,8 +3147,7 @@ a {

    Provide context for form controls within each field.

    {% highlight scss %} .placeholder(@color: @input-color-placeholder) { - &:-moz-placeholder { color: @color; } // Firefox 4-18 - &::-moz-placeholder { color: @color; } // Firefox 19+ + &::-moz-placeholder { color: @color; } // Firefox &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+ &::-webkit-input-placeholder { color: @color; } // Safari and Chrome } -- cgit v1.2.3 From d1d5d9041365c92b5e5577d2133a26fe509223e8 Mon Sep 17 00:00:00 2001 From: mrmrs Date: Fri, 7 Mar 2014 00:10:46 -0800 Subject: Fixes #12748 --- docs/css.html | 70 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 67 insertions(+), 3 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 9cd635cd7..6d14fbb0d 100644 --- a/docs/css.html +++ b/docs/css.html @@ -718,9 +718,54 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e

    Built with Less

    The typographic scale is based on two Less variables in variables.less: @font-size-base and @line-height-base. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.

    + +

    Inline text elements

    +

    Marked text

    +

    For indicating blocks of text that have been deleted use the <mark> tag.

    +
    +

    You can use the mark tag to highlight text.

    +
    +{% highlight html %} +This line of text is meant to be treated as deleted text. +{% endhighlight %} + + +

    Deleted text

    +

    For indicating blocks of text that have been deleted use the <del> tag.

    +
    +

    This line of text is meant to be treated as deleted text.

    +
    +{% highlight html %} +This line of text is meant to be treated as deleted text. +{% endhighlight %} + +

    Strikethrough text

    +

    For indicating blocks of text that are no longer relevant use the <s> tag.

    +
    +

    This line of text is meant to be treated as no longer accurate.

    +
    +{% highlight html %} +This line of text is meant to be treated as no longer accurate. +{% endhighlight %} + +

    Inserted text

    +

    For indicating additions to the document use the <ins> tag.

    +
    +

    This line of text is meant to be treated as an addition to the document.

    +
    +{% highlight html %} +This line of text is meant to be treated as an addition to the document. +{% endhighlight %} + +

    Underlined text

    +

    To underline text use the <u> tag.

    +
    +

    This line of text is will render as underlined

    +
    +{% highlight html %} +This line of text is will render as underlined +{% endhighlight %} - -

    Emphasis

    Make use of HTML's default emphasis tags with lightweight styles.

    Small text

    @@ -757,7 +802,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e

    Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

    -

    Alignment classes

    +

    Alignment classes

    Easily realign text to components with text alignment classes.

    Left aligned text.

    @@ -1051,10 +1096,29 @@ For example, <section> should be wrapped as inline. {% endhighlight %}

    You may optionally add the .pre-scrollable class, which will set a max-height of 350px and provide a y-axis scrollbar.

    +

    Variables

    +

    For indicating variables use the <var> tag.

    +
    +

    y = mx + b

    + +
    +{% highlight html %} +y = mx + b +{% endhighlight %} + +

    Sample output

    +

    For indicating blocks sample output from a program use the <samp> tag.

    +
    +

    This text is meant to be treated as sample output from a computer program.

    +
    +{% highlight html %} +This text is meant to be treated as sample output from a computer program. +{% endhighlight %}
    +
    -- cgit v1.2.3 From acdc053ee3f17ce10088b146d7b154e609240d3c Mon Sep 17 00:00:00 2001 From: Bas Bosman Date: Fri, 7 Mar 2014 11:20:31 +0100 Subject: Add transition-timing-function mixin to docs --- docs/css.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 6d14fbb0d..fea9711eb 100644 --- a/docs/css.html +++ b/docs/css.html @@ -3078,7 +3078,7 @@ a { {% endhighlight %}

    Transitions

    -

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

    +

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

    The mixins are deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.

    {% highlight scss %} .transition(@transition) { @@ -3097,6 +3097,10 @@ a { -webkit-transition-duration: @transition-duration; transition-duration: @transition-duration; } +.transition-timing-function(@timing-function) { + -webkit-transition-timing-function: @timing-function; + transition-timing-function: @timing-function; +} .transition-transform(@transition) { -webkit-transition: -webkit-transform @transition; -moz-transition: -moz-transform @transition; -- cgit v1.2.3 From a15c24410be8b94671dcfc3b154e0034a3aaf35f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 9 Mar 2014 21:25:51 -0700 Subject: Fixes #12759 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Ensures proper sizing and alignment of input groups within inline and navbar forms. * Uses `inline-table` on the input group * Nukes the widths to `width: auto`—without this, the parent input group doesn’t size correctly and functions as `display: table;` or `block` --- docs/css.html | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 6b1a6c222..6cf3c6c82 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1649,6 +1649,12 @@ For example, <section> should be wrapped as inline.
    +
    +
    +
    @
    + +
    +
    -- cgit v1.2.3