From 19d6301506bfde60eb7a93a1a6a0532cb79f6e0f Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Thu, 24 Dec 2015 18:30:25 -0700 Subject: docs: Add SRI hash for jQuery; refs #18665 --- docs/getting-started/introduction.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/getting-started') diff --git a/docs/getting-started/introduction.md b/docs/getting-started/introduction.md index b35c4134b..51f9ab6cc 100644 --- a/docs/getting-started/introduction.md +++ b/docs/getting-started/introduction.md @@ -27,7 +27,7 @@ Copy-paste the stylesheet `` into your `` before all other styleshee Add our JavaScript plugins, jQuery, and Tether near the end of your pages, right before the closing `` tag. Be sure to place jQuery and Tether first, as our code depends on them. {% highlight html %} - + {% endhighlight %} @@ -60,7 +60,7 @@ Put it all together and your pages should look like this:

Hello, world!

- + -- cgit v1.2.3 From 9304f23ad887d2151659f7958244af816af1ac95 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Thu, 24 Dec 2015 18:35:11 -0700 Subject: docs: Add SRI hash for Tether; refs #18665 --- docs/getting-started/introduction.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/getting-started') diff --git a/docs/getting-started/introduction.md b/docs/getting-started/introduction.md index 51f9ab6cc..8cec71fd6 100644 --- a/docs/getting-started/introduction.md +++ b/docs/getting-started/introduction.md @@ -28,7 +28,7 @@ Add our JavaScript plugins, jQuery, and Tether near the end of your pages, right {% highlight html %} - + {% endhighlight %} @@ -61,7 +61,7 @@ Put it all together and your pages should look like this: - + -- cgit v1.2.3 From bc646158df2df9041135f518c51e7eff4ff86597 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 11 Jan 2016 00:19:42 -0800 Subject: Refer to open successor Chrome bug in Accessibility docs https://crbug.com/262171 was closed as a duplicate of https://crbug.com/454172 [skip sauce] --- docs/getting-started/accessibility.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/getting-started') diff --git a/docs/getting-started/accessibility.md b/docs/getting-started/accessibility.md index a67985398..147d9305e 100644 --- a/docs/getting-started/accessibility.md +++ b/docs/getting-started/accessibility.md @@ -25,7 +25,7 @@ In addition, groups and toolbars should be given an explicit label, as most assi If your navigation contains many links and comes before the main content in the DOM, add a `Skip to main content` link before the navigation (for a simple explanation, see this [A11Y Project article on skip navigation links](http://a11yproject.com/posts/skip-nav-links/)). Using the `.sr-only` class will visually hide the skip link, and the .sr-only-focusable class will ensure that the link becomes visible once focused (for sighted keyboard users). {% callout danger %} -Due to long-standing shortcomings/bugs in Chrome (see [issue 262171 in the Chromium bug tracker](https://code.google.com/p/chromium/issues/detail?id=262171 "Chromium bug tracker - Issue 262171: Focus should cycle from named anchor")) and Internet Explorer (see this article on [in-page links and focus order](http://accessibleculture.org/articles/2010/05/in-page-links/)), you will need to make sure that the target of your skip link is at least programmatically focusable by adding `tabindex="-1"`. +Due to long-standing shortcomings/bugs in Chrome (see [issue 454172 in the Chromium bug tracker](https://code.google.com/p/chromium/issues/detail?id=454172 "Chromium bug tracker - Issue 454172: Focus Link Target (sequential focus navigation starting point)")) and Internet Explorer (see this article on [in-page links and focus order](http://accessibleculture.org/articles/2010/05/in-page-links/)), you will need to make sure that the target of your skip link is at least programmatically focusable by adding `tabindex="-1"`. In addition, you may want to explicitly suppress a visible focus indication on the target (particularly as Chrome currently also sets focus on elements with `tabindex="-1"` when they are clicked with the mouse) with `#content:focus { outline: none; }`. -- cgit v1.2.3 From ec1e626b98e012ea84d2e75cdc1c0b60b15f8843 Mon Sep 17 00:00:00 2001 From: Quy Date: Thu, 14 Jan 2016 22:01:50 -0800 Subject: Add missing word --- docs/getting-started/options.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/getting-started') diff --git a/docs/getting-started/options.md b/docs/getting-started/options.md index 35ff5e3d0..53aad61fd 100644 --- a/docs/getting-started/options.md +++ b/docs/getting-started/options.md @@ -16,6 +16,6 @@ You can find and customize these variables in our `_variables.scss` file. | `$enable-flex` | `true` or `false` (default) | Swaps `float` and `display: table` styles for `display: flex`. | | `$enable-rounded` | `true` (default) or `false` | Enables predefined `border-radius` styles on various components. | | `$enable-shadows` | `true` or `false` (default) | Enables predefined `box-shadow` styles on various components. | -| `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` various components. | +| `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` on various components. | | `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. | | `$enable-hover-media-query` | `true` or `false` (default) | ... | -- cgit v1.2.3 From f2a0623d34cf861bed598066ebcb061c3c7bf9f2 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Thu, 14 Jan 2016 22:33:09 -0800 Subject: Docs: Tweak phrasing of description of $enable-gradients [ci skip] --- docs/getting-started/options.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/getting-started') diff --git a/docs/getting-started/options.md b/docs/getting-started/options.md index 53aad61fd..5de826f8b 100644 --- a/docs/getting-started/options.md +++ b/docs/getting-started/options.md @@ -16,6 +16,6 @@ You can find and customize these variables in our `_variables.scss` file. | `$enable-flex` | `true` or `false` (default) | Swaps `float` and `display: table` styles for `display: flex`. | | `$enable-rounded` | `true` (default) or `false` | Enables predefined `border-radius` styles on various components. | | `$enable-shadows` | `true` or `false` (default) | Enables predefined `box-shadow` styles on various components. | -| `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` on various components. | +| `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. | | `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. | | `$enable-hover-media-query` | `true` or `false` (default) | ... | -- cgit v1.2.3 From dd4062f213b2b233ea5e57a8b2be93f41614c6ca Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 17 Jan 2016 16:04:18 -0800 Subject: Update docs to include mention of the custom variables file --- docs/getting-started/options.md | 24 +++++++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) (limited to 'docs/getting-started') diff --git a/docs/getting-started/options.md b/docs/getting-started/options.md index 5de826f8b..0a98c40d3 100644 --- a/docs/getting-started/options.md +++ b/docs/getting-started/options.md @@ -4,11 +4,29 @@ title: Customization options group: getting-started --- -With Bootstrap 4, we've added a handful of global options for easily customizing all the components in your project. These options are handled by Sass variables. Simply change a variable's value and recompile with the included Gruntfile. +Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new `$enable-*` Sass variables. Override a variable's value and recompile with the included Gruntfile as needed. -## Available variables +## Customizing variables -You can find and customize these variables in our `_variables.scss` file. +Bootstrap 4 ships with a `_custom.scss` file for easy variable overrides. Copy and paste relevant lines from `_variables.scss` into the custom file and recompile your Sass to change our default values. **Be sure to remove the `!default` flag from override values.** + +For example, to change out the `background-color` and `color` for the ``, you'd do the following: + +{% highlight scss %} +// Bootstrap overrides +// +// Copy variables from `_variables.scss` to this file to override default values +// without modifying source files. + +$body-bg: $gray-dark; +$body-color: $gray-light; +{% endhighlight %} + +Do the same for any variable you need to override, including the global options listed below. + +## Global options + +You can find and customize these variables for key global options in our `_variables.scss` file. | Variable | Values | Description | | --------------------------- | ---------------------------------- | ----------------------------------------------------------------------- | -- cgit v1.2.3 From 69523b1e041f98986d1868e57040bff9dc43c8f9 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Wed, 20 Jan 2016 18:25:57 -0800 Subject: Restore workarounds for #12078 printing bug that were lost in 86af1f3 Refs #18984 [skip sauce] --- docs/getting-started/browsers-devices.md | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'docs/getting-started') diff --git a/docs/getting-started/browsers-devices.md b/docs/getting-started/browsers-devices.md index edb0a738f..ca38658dd 100644 --- a/docs/getting-started/browsers-devices.md +++ b/docs/getting-started/browsers-devices.md @@ -220,6 +220,10 @@ Even in some modern browsers, printing can be quirky. In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. [See #12078 for some details.](https://github.com/twbs/bootstrap/issues/12078) Suggested workarounds: +* Embrace the extra-small grid and make sure your page looks acceptable under it. +* Customize the value of the `$grid-breakpoints` Sass variable so that your printer paper is considered larger than extra-small. +* Add custom media queries to change the grid size breakpoints for print media only. + Also, as of Safari v8.0, fixed-width .containers can cause Safari to use an unusually small font size when printing. See #14868 for more details. One potential workaround for this is adding the following CSS: {% highlight css %} -- cgit v1.2.3 From c9f5f13fd9bde4b745bf135478750cbe1a97a834 Mon Sep 17 00:00:00 2001 From: David Beitey Date: Thu, 21 Jan 2016 10:53:27 +1000 Subject: Clean up printing documentation Replace inline HTML with markdown, rewording, and cleanup. Closes #18984 --- docs/getting-started/browsers-devices.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/getting-started') diff --git a/docs/getting-started/browsers-devices.md b/docs/getting-started/browsers-devices.md index ca38658dd..447462d7a 100644 --- a/docs/getting-started/browsers-devices.md +++ b/docs/getting-started/browsers-devices.md @@ -218,13 +218,13 @@ Bootstrap includes a workaround for this, although it is disabled by default. By Even in some modern browsers, printing can be quirky. -In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. [See #12078 for some details.](https://github.com/twbs/bootstrap/issues/12078) Suggested workarounds: +In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. See [issue #12078](https://github.com/twbs/bootstrap/issues/12078) for some details. Suggested workarounds: * Embrace the extra-small grid and make sure your page looks acceptable under it. * Customize the value of the `$grid-breakpoints` Sass variable so that your printer paper is considered larger than extra-small. * Add custom media queries to change the grid size breakpoints for print media only. -Also, as of Safari v8.0, fixed-width .containers can cause Safari to use an unusually small font size when printing. See #14868 for more details. One potential workaround for this is adding the following CSS: +Also, as of Safari v8.0, use of the fixed-width `.container` class can cause Safari to use an unusually small font size when printing. See [issue #14868](https://github.com/twbs/bootstrap/issues/14868) for more details. One potential workaround is the following CSS: {% highlight css %} @media print { -- cgit v1.2.3 From 2c86b67a0baa5c4329c5fbadacc395880f5c93f7 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Wed, 3 Feb 2016 22:52:12 -0800 Subject: Mention https://webkit.org/b/153852 in browser compatibility docs Refs #19077 [skip sauce] --- docs/getting-started/browsers-devices.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/getting-started') diff --git a/docs/getting-started/browsers-devices.md b/docs/getting-started/browsers-devices.md index 447462d7a..d06845e90 100644 --- a/docs/getting-started/browsers-devices.md +++ b/docs/getting-started/browsers-devices.md @@ -195,7 +195,7 @@ As a heads up, we include this in all of Bootstrap's documentation and examples ### Overflow and scrolling -Support for `overflow: hidden;` on the `` element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the `` content will begin to scroll. +Support for `overflow: hidden;` on the `` element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the `` content will begin to scroll. See [WebKit bug #153852](https://bugs.webkit.org/show_bug.cgi?id=153852). ### Virtual keyboards -- cgit v1.2.3