From 1f43d9c066f1ffd008f2cb4b00907165d905f3fc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 27 May 2017 22:03:48 -0700 Subject: [PATCH] revamp getting started docs to use new toc --- docs/getting-started/accessibility.md | 6 +----- docs/getting-started/browsers-devices.md | 10 ++-------- docs/getting-started/build-tools.md | 12 ++++-------- docs/getting-started/contents.md | 5 ++--- docs/getting-started/download.md | 12 ++++-------- docs/getting-started/javascript.md | 10 ++-------- docs/getting-started/options.md | 7 ++++--- docs/getting-started/webpack.md | 17 +++++------------ 8 files changed, 24 insertions(+), 55 deletions(-) diff --git a/docs/getting-started/accessibility.md b/docs/getting-started/accessibility.md index 9a90c295cd..f16686f989 100644 --- a/docs/getting-started/accessibility.md +++ b/docs/getting-started/accessibility.md @@ -3,15 +3,11 @@ layout: docs title: Accessibility description: A brief overview of Bootstrap's features and limitations for the creation of accessible content. group: getting-started +toc: true --- Bootstrap provides an easy-to-use framework of ready-made styles, layout tools, and interactive components, allowing developers to create web sites and applications that are visually appealing, functionally rich, and accessible out of the box. -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - ## Overview and limitations The overall accessibility of any project built with Bootstrap depends in large part on the author's markup, additional styling, and scripting they've included. However, provided that these have been implemented correctly, it should be perfectly possible to create web sites and applications with Bootstrap that fulfill [WCAG 2.0](https://www.w3.org/TR/WCAG20/) (A/AA/AAA), [Section 508](https://www.section508.gov/) and similar accessibility standards and requirements. diff --git a/docs/getting-started/browsers-devices.md b/docs/getting-started/browsers-devices.md index 5dee37dfff..9fe08bbb67 100644 --- a/docs/getting-started/browsers-devices.md +++ b/docs/getting-started/browsers-devices.md @@ -1,17 +1,11 @@ --- layout: docs title: Browsers and devices -description: Learn which browsers and devices are supported by Bootstrap. +description: Learn about the browsers and devices, from modern to told, that are supported by Bootstrap, including known quirks and bugs for each. group: getting-started +toc: true --- -Bootstrap supports a wide variety of modern browsers and devices, and some older ones. See which exact ones below, as well as detailed information on known quirks and bugs. - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - ## Supported browsers Bootstrap supports the **latest, stable releases** of all major browsers and platforms. On Windows, **we support Internet Explorer 10-11 / Microsoft Edge**. diff --git a/docs/getting-started/build-tools.md b/docs/getting-started/build-tools.md index 6c1353052d..dd3cac0bed 100644 --- a/docs/getting-started/build-tools.md +++ b/docs/getting-started/build-tools.md @@ -1,19 +1,15 @@ --- layout: docs title: Build tools -description: Details on how to use Bootstrap's included build tools to compile source code, run tests, and more. +description: Learn how to use Bootstrap's included npm scripts to build our documentation, compile source code, run tests, and more. group: getting-started +toc: true --- -Bootstrap uses [NPM scripts](https://docs.npmjs.com/misc/scripts) for its build system. Our [package.json](https://github.com/twbs/bootstrap/blob/v4-dev/package.json) includes convenient methods for working with the framework, including compiling code, running tests, and more. - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - ## Tooling setup +Bootstrap uses [NPM scripts](https://docs.npmjs.com/misc/scripts) for its build system. Our [package.json](https://github.com/twbs/bootstrap/blob/v4-dev/package.json) includes convenient methods for working with the framework, including compiling code, running tests, and more. + To use our build system and run our documentation locally, you'll need a copy of Bootstrap's source files and Node. Follow these steps and you should be ready to rock: 1. [Download and install Node](https://nodejs.org/download/), which we use to manage our dependencies. diff --git a/docs/getting-started/contents.md b/docs/getting-started/contents.md index 682c2310cc..96acbc0537 100644 --- a/docs/getting-started/contents.md +++ b/docs/getting-started/contents.md @@ -1,12 +1,11 @@ --- layout: docs title: Contents -description: Learn about what's included in Bootstrap's precompiled and source code directories. +description: Discover what's included in Bootstrap, including our precompiled and source code flavors. Remember, Bootstrap's JavaScript plugins require jQuery. group: getting-started +toc: true --- -Bootstrap can come in one of two forms, as precompiled or source code. Learn more about each flavor's contents and structure below. Remember, no matter the implementation flavor, **Bootstrap's JavaScript plugins require jQuery**. - ## Precompiled Bootstrap Once downloaded, unzip the compressed folder and you'll see something like this: diff --git a/docs/getting-started/download.md b/docs/getting-started/download.md index 2323d3e4db..dc85ef50a2 100644 --- a/docs/getting-started/download.md +++ b/docs/getting-started/download.md @@ -1,21 +1,17 @@ --- layout: docs title: Download -description: Download Bootstrap's compiled CSS and JavaScript, source code, or include it with your favorite package manager. +description: Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, Bower, RubyGems, and more. group: getting-started +toc: true --- -**Bootstrap v{{ site.current_version}}** is available for download in several ways, including some of your favorite package managers. Choose from the options below to snag just what you need. - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - ## Bootstrap CSS and JS **Download Bootstrap's ready-to-use code to easily drop into your project.** Includes compiled and minified versions of all our CSS bundles (default, grid only, or Reboot only) and JavaScript plugins. Doesn't include documentation or source files. +**Current version:** v{{ site.current_version}} + Download Bootstrap ## Source files diff --git a/docs/getting-started/javascript.md b/docs/getting-started/javascript.md index d65fba0985..c4fb2366a4 100644 --- a/docs/getting-started/javascript.md +++ b/docs/getting-started/javascript.md @@ -1,17 +1,11 @@ --- layout: docs title: JavaScript -description: Learn about Bootstrap's JavaScript—how to include it, our data and programmatic API options, and more. +description: Bring Bootstrap to life with our JavaScript plugins built on jQuery. Learn about each plugin, our data and programmatic API options, and more. group: getting-started +toc: true --- -Bootstrap includes a handful of JavaScript to help bring some of our components to life. Learn more about how to include it, our data and programmatic API options, and more. - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - ## Individual or compiled Plugins can be included individually (using Bootstrap's individual `*.js` files), or all at once using `bootstrap.js` or the minified `bootstrap.min.js` (don't include both). diff --git a/docs/getting-started/options.md b/docs/getting-started/options.md index 82d172f3e4..acc7ce451c 100644 --- a/docs/getting-started/options.md +++ b/docs/getting-started/options.md @@ -1,12 +1,11 @@ --- layout: docs title: Customization options -description: Customize Bootstrap with Sass variables, easily toggling global preferences with a quick recompile. +description: Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new Sass variables. group: getting-started +toc: true --- -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 `npm run test` as needed. - ## Customizing variables Bootstrap 4 ships with a `_custom.scss` file for easy overriding of default variables in `/scss/_variables.scss`. Copy and paste relevant lines from there into the `_custom.scss` file, modify the values, and recompile your Sass to change our default values. **Be sure to remove the `!default` flag from override values.** @@ -27,6 +26,8 @@ Do the same for any variable you need to override, including the global options ## Global options +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 `npm run test` as needed. + You can find and customize these variables for key global options in our `_variables.scss` file. | Variable | Values | Description | diff --git a/docs/getting-started/webpack.md b/docs/getting-started/webpack.md index 1c87f342ec..dd246e0453 100644 --- a/docs/getting-started/webpack.md +++ b/docs/getting-started/webpack.md @@ -1,18 +1,11 @@ --- layout: docs title: Webpack -description: Learn how to install Bootstrap using webpack 2 +description: Learn how to include Bootstrap in your project using Webpack 2. group: getting-started +toc: true --- -Use [webpack v2.x](https://webpack.js.org/) to bundle Bootstrap into your project. - - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - ## Installing Bootstrap [Install bootstrap](/getting-started/download/#npm) as a node module using npm. @@ -60,16 +53,16 @@ Notice that if you chose to **import plugins individually**, you must also insta ### Importing Precompiled SASS -To enjoy the full potential of Bootstrap and customize it to your needs, use the source files as a part of your project's bundling process. +To enjoy the full potential of Bootstrap and customize it to your needs, use the source files as a part of your project's bundling process. -First, create your own `_custom.scss` and use it to override the [built-in custom variables](/getting-started/options/). Then, use your main sass file to import your custom variables, followed by Bootstrap: +First, create your own `_custom.scss` and use it to override the [built-in custom variables](/getting-started/options/). Then, use your main sass file to import your custom variables, followed by Bootstrap: {% highlight scss %} @import "custom"; @import "~bootstrap/scss/bootstrap"; {% endhighlight %} For Bootstrap to compile, make sure you install and use the required loaders: [sass-loader](https://github.com/webpack-contrib/sass-loader), [postcss-loader](https://github.com/postcss/postcss-loader) with [Autoprefixer](https://github.com/postcss/autoprefixer#webpack) and [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes). With minimal setup, your webpack config should include this rule or similar: - + {% highlight js %} ... {