From 7bf868a709d5e278048f7fe5fd62d2fa9365d5bc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 2 Oct 2016 18:19:47 -0700 Subject: v4: Social meta tags (#20825) * descriptions for getting started pages * descriptions for layout * add content page descriptions * more descriptions, updates to some existing ones * correct site url * add social stuff to config for twitter cards * add twitter meta tags; use large image for homepage and regular card for all others * add the assets * more site config * more social shiz to partial, remove existing meta for the partial, remove page title from homepage for simpler if statements --- docs/getting-started/accessibility.md | 1 + docs/getting-started/best-practices.md | 1 + docs/getting-started/browsers-devices.md | 1 + docs/getting-started/build-tools.md | 1 + docs/getting-started/contents.md | 1 + docs/getting-started/download.md | 1 + docs/getting-started/flexbox.md | 1 + docs/getting-started/introduction.md | 1 + docs/getting-started/javascript.md | 1 + docs/getting-started/options.md | 1 + 10 files changed, 10 insertions(+) (limited to 'docs/getting-started') diff --git a/docs/getting-started/accessibility.md b/docs/getting-started/accessibility.md index 43dee3569..19105b8ac 100644 --- a/docs/getting-started/accessibility.md +++ b/docs/getting-started/accessibility.md @@ -1,6 +1,7 @@ --- layout: docs title: Accessibility +description: Learn how Bootstrap supports common web standards for making sites that are accessibile to those using assistive technology. group: getting-started --- diff --git a/docs/getting-started/best-practices.md b/docs/getting-started/best-practices.md index 1e67a16e7..c030a5ac6 100644 --- a/docs/getting-started/best-practices.md +++ b/docs/getting-started/best-practices.md @@ -1,6 +1,7 @@ --- layout: docs title: Best practices +description: Learn about some of the best practices we've gathered from years of working on and using Bootstrap. group: getting-started --- diff --git a/docs/getting-started/browsers-devices.md b/docs/getting-started/browsers-devices.md index a73ec8982..4e0b0c78b 100644 --- a/docs/getting-started/browsers-devices.md +++ b/docs/getting-started/browsers-devices.md @@ -1,6 +1,7 @@ --- layout: docs title: Browsers and devices +description: Learn which browsers and devices are supported by Bootstrap. group: getting-started --- diff --git a/docs/getting-started/build-tools.md b/docs/getting-started/build-tools.md index 2fe10088b..4d684f3ac 100644 --- a/docs/getting-started/build-tools.md +++ b/docs/getting-started/build-tools.md @@ -1,6 +1,7 @@ --- layout: docs title: Build tools +description: Details on how to use Bootstrap's included build tools to compile source code, run tests, and more. group: getting-started --- diff --git a/docs/getting-started/contents.md b/docs/getting-started/contents.md index ab9c63325..c54cb5eba 100644 --- a/docs/getting-started/contents.md +++ b/docs/getting-started/contents.md @@ -1,6 +1,7 @@ --- layout: docs title: Contents +description: Learn about what's included in Bootstrap's precompiled and source code directories. group: getting-started --- diff --git a/docs/getting-started/download.md b/docs/getting-started/download.md index be46329be..183dd0abd 100644 --- a/docs/getting-started/download.md +++ b/docs/getting-started/download.md @@ -1,6 +1,7 @@ --- layout: docs title: Download +description: Download Bootstrap's compiled CSS and JavaScript, source code, or include it with your favorite package manager. group: getting-started --- diff --git a/docs/getting-started/flexbox.md b/docs/getting-started/flexbox.md index 9c0f1a876..b658001fe 100644 --- a/docs/getting-started/flexbox.md +++ b/docs/getting-started/flexbox.md @@ -1,6 +1,7 @@ --- layout: docs title: Flexbox +description: Learn how to enable flexbox support in Bootstrap 4 with the flick of a variable or the swap of a stylesheet. group: getting-started --- diff --git a/docs/getting-started/introduction.md b/docs/getting-started/introduction.md index 8cec71fd6..716f6f349 100644 --- a/docs/getting-started/introduction.md +++ b/docs/getting-started/introduction.md @@ -1,6 +1,7 @@ --- layout: docs title: Introduction +description: Get started with Bootstrap using the Bootstrap CDN and a template starter page. group: getting-started redirect_from: "/getting-started/" --- diff --git a/docs/getting-started/javascript.md b/docs/getting-started/javascript.md index debc4dcf5..b6a38fb7a 100644 --- a/docs/getting-started/javascript.md +++ b/docs/getting-started/javascript.md @@ -1,6 +1,7 @@ --- layout: docs title: JavaScript +description: Learn about Bootstrap's JavaScript—how to include it, our data and programmatic API options, and more. group: getting-started --- diff --git a/docs/getting-started/options.md b/docs/getting-started/options.md index dd7f7fb3d..81c9c92fc 100644 --- a/docs/getting-started/options.md +++ b/docs/getting-started/options.md @@ -1,6 +1,7 @@ --- layout: docs title: Customization options +description: Customize Bootstrap with Sass variables, easily toggling global preferences with a quick recompile. group: getting-started --- -- cgit v1.2.3 From 2e69dfa8c1679238579ef6f5ec85deb755e4fb6d Mon Sep 17 00:00:00 2001 From: Bardi Harborow Date: Tue, 4 Oct 2016 02:55:59 +1000 Subject: Fix broken/redirected links, moving to HTTPS where possible. (#20557) --- docs/getting-started/accessibility.md | 2 +- docs/getting-started/browsers-devices.md | 4 ++-- docs/getting-started/build-tools.md | 6 +++--- docs/getting-started/download.md | 4 ++-- docs/getting-started/flexbox.md | 2 +- docs/getting-started/introduction.md | 8 ++++---- 6 files changed, 13 insertions(+), 13 deletions(-) (limited to 'docs/getting-started') diff --git a/docs/getting-started/accessibility.md b/docs/getting-started/accessibility.md index 19105b8ac..d7ecd8cec 100644 --- a/docs/getting-started/accessibility.md +++ b/docs/getting-started/accessibility.md @@ -47,7 +47,7 @@ Note that this bug will also affect any other in-page links your site may be usi When nesting headings (`

` - `

`), your primary document header should be an `

`. Subsequent headings should make logical use of `

` - `

` such that screen readers can construct a table of contents for your pages. -Learn more at [HTML CodeSniffer](http://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/) and [Penn State's Accessability](http://accessibility.psu.edu/headings). +Learn more at [HTML CodeSniffer](https://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/) and [Penn State's Accessability](http://accessibility.psu.edu/headings). ## Additional resources diff --git a/docs/getting-started/browsers-devices.md b/docs/getting-started/browsers-devices.md index 4e0b0c78b..842092ccf 100644 --- a/docs/getting-started/browsers-devices.md +++ b/docs/getting-started/browsers-devices.md @@ -172,7 +172,7 @@ See [this StackOverflow question](https://stackoverflow.com/questions/6771258/wh ## Internet Explorer 10 in Windows Phone 8 -Internet Explorer 10 in Windows Phone 8 versions older than [Update 3 (a.k.a. GDR3)](http://blogs.windows.com/windows_phone/b/wpdev/archive/2013/10/14/introducing-windows-phone-preview-for-developers.aspx) doesn't differentiate **device width** from **viewport width** in `@-ms-viewport` at-rules, and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, you'll need to **include the following JavaScript to work around the bug**. +Internet Explorer 10 in Windows Phone 8 versions older than [Update 3 (a.k.a. GDR3)](https://blogs.windows.com/buildingapps/2013/10/14/introducing-windows-phone-preview-for-developers/) doesn't differentiate **device width** from **viewport width** in `@-ms-viewport` at-rules, and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, you'll need to **include the following JavaScript to work around the bug**. {% highlight js %} // Copyright 2014-2015 The Bootstrap Authors @@ -189,7 +189,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) { } {% endhighlight %} -For more information and usage guidelines, read [Windows Phone 8 and Device-Width](http://timkadlec.com/2013/01/windows-phone-8-and-device-width/). +For more information and usage guidelines, read [Windows Phone 8 and Device-Width](https://timkadlec.com/2013/01/windows-phone-8-and-device-width/). As a heads up, we include this in all of Bootstrap's documentation and examples as a demonstration. diff --git a/docs/getting-started/build-tools.md b/docs/getting-started/build-tools.md index 4d684f3ac..a6d0593fa 100644 --- a/docs/getting-started/build-tools.md +++ b/docs/getting-started/build-tools.md @@ -20,7 +20,7 @@ To use our Gruntfile and run our documentation locally, you'll need a copy of Bo When completed, you'll be able to run the various Grunt commands provided from the command line. [install-ruby]: https://www.ruby-lang.org/en/documentation/installation/ -[gembundler]: http://bundler.io/ +[gembundler]: https://bundler.io/ ## Using Grunt @@ -30,7 +30,7 @@ Our Gruntfile includes the following commands and tasks: | --- | --- | | `grunt` | Run `grunt` to run tests locally and compile the CSS and JavaScript into `/dist`. **Uses [Sass](http://sass-lang.com/), [Autoprefixer][autoprefixer], and [UglifyJS](http://lisperator.net/uglifyjs/).** | | `grunt dist` | `grunt dist` creates the `/dist` directory with compiled files. **Uses [Sass](http://sass-lang.com/), [Autoprefixer][autoprefixer], and [UglifyJS](http://lisperator.net/uglifyjs/).** | -| `grunt test` | Runs [scss-lint](https://github.com/brigade/scss-lint), [ESLint](http://eslint.org/) and [QUnit](http://qunitjs.com/) tests headlessly in [PhantomJS](http://phantomjs.org/) (used for CI). | +| `grunt test` | Runs [scss-lint](https://github.com/brigade/scss-lint), [ESLint](http://eslint.org/) and [QUnit](https://qunitjs.com/) tests headlessly in [PhantomJS](http://phantomjs.org/) (used for CI). | | `grunt docs` | Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally via `jekyll serve`. | | `grunt watch` | This is a convenience method for watching just Sass files and automatically building them whenever you save. | @@ -57,7 +57,7 @@ Running our documentation locally requires the use of Jekyll, a decently flexibl 2. From the root `/bootstrap` directory, run `bundle exec jekyll serve` in the command line. 3. Open in your browser, and voilà. -Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/). +Learn more about using Jekyll by reading its [documentation](https://jekyllrb.com/docs/home/). ## Troubleshooting diff --git a/docs/getting-started/download.md b/docs/getting-started/download.md index 183dd0abd..e3cf1e474 100644 --- a/docs/getting-started/download.md +++ b/docs/getting-started/download.md @@ -37,7 +37,7 @@ Bootstrap's `package.json` contains some additional metadata under the following ### RubyGems -Install Bootstrap in your Ruby apps using [Bundler](http://bundler.io/) (**recommended**) and [RubyGems](https://rubygems.org/) by adding the following line to your [`Gemfile`](http://bundler.io/gemfile.html): +Install Bootstrap in your Ruby apps using [Bundler](https://bundler.io/) (**recommended**) and [RubyGems](https://rubygems.org/) by adding the following line to your [`Gemfile`](https://bundler.io/gemfile.html): {% highlight ruby %} gem 'bootstrap', '~> 4.0.0.alpha3' @@ -67,7 +67,7 @@ $ composer require twbs/bootstrap:{{ site.current_version }} ### Bower -Install and manage Bootstrap's Sass and JavaScript using [Bower](http://bower.io). +Install and manage Bootstrap's Sass and JavaScript using [Bower](https://bower.io). {% highlight bash %} $ bower install bootstrap#v{{ site.current_version }} diff --git a/docs/getting-started/flexbox.md b/docs/getting-started/flexbox.md index b658001fe..f0acc3dcb 100644 --- a/docs/getting-started/flexbox.md +++ b/docs/getting-started/flexbox.md @@ -40,7 +40,7 @@ If you're familiar with modifying variables in Sass—or any other CSS preproces 2. Change it from `false` to `true`. 3. Recompile, and done! -Alternatively, if you don't need the source Sass files, you may swap the default Bootstrap compiled CSS with the compiled flexbox variation. [Head to the download page]({{ site.baseurl }}/getting-started/download) for more information. +Alternatively, if you don't need the source Sass files, you may swap the default Bootstrap compiled CSS with the compiled flexbox variation. [Head to the download page]({{ site.baseurl }}/getting-started/download/) for more information. ## Browser support diff --git a/docs/getting-started/introduction.md b/docs/getting-started/introduction.md index 716f6f349..bb9f0ea5f 100644 --- a/docs/getting-started/introduction.md +++ b/docs/getting-started/introduction.md @@ -17,7 +17,7 @@ Here's how to quickly get started with the Bootstrap CDN and a template starter ## Quick start -Looking to quickly add Bootstrap to your project? Use the Bootstrap CDN, provided for free by the folks at MaxCDN. Using a package manager or need to download the source files? [Head to the downloads page.]({{ site.baseurl }}/getting-started/download) +Looking to quickly add Bootstrap to your project? Use the Bootstrap CDN, provided for free by the folks at MaxCDN. Using a package manager or need to download the source files? [Head to the downloads page.]({{ site.baseurl }}/getting-started/download/) Copy-paste the stylesheet `` into your `` before all other stylesheets to load our CSS. @@ -40,7 +40,7 @@ And that's it—you're on your way to a fully Bootstrapped site. If you're at al Be sure to have your pages set up with the latest design and development standards. That means: * Using an HTML5 doctype -* Forcing Internet Explorer to use its latest rendering mode ([read more](http://stackoverflow.com/q/6771258)) +* Forcing Internet Explorer to use its latest rendering mode ([read more](https://stackoverflow.com/questions/6771258/what-does-meta-http-equiv-x-ua-compatible-content-ie-edge-do)) * And, utilizing the viewport meta tag. Put it all together and your pages should look like this: @@ -68,7 +68,7 @@ Put it all together and your pages should look like this: {% endhighlight %} -That's all you need for overall page requirements. Visit the [Layout docs]({{ site.baseurl }}/layout/overview) or [our official examples]({{ site.baseurl }}/examples/) to start laying out your site's content and components. +That's all you need for overall page requirements. Visit the [Layout docs]({{ site.baseurl }}/layout/overview/) or [our official examples]({{ site.baseurl }}/examples/) to start laying out your site's content and components. ## Important globals @@ -115,7 +115,7 @@ Learn more about [box model and sizing at CSS Tricks](https://css-tricks.com/box ### Normalize.css -For improved cross-browser rendering, we use [Normalize.css](http://necolas.github.io/normalize.css/) to correct small inconsistencies across browsers and devices. We further build on this with our own, slightly more opinionated styles with [Reboot]({{ site.baseurl }}/content/reboot/). +For improved cross-browser rendering, we use [Normalize.css](https://necolas.github.io/normalize.css/) to correct small inconsistencies across browsers and devices. We further build on this with our own, slightly more opinionated styles with [Reboot]({{ site.baseurl }}/content/reboot/). ## Community -- cgit v1.2.3 From 3ae450e74c6ea77ef57afd0cf1dc3ef156ea5322 Mon Sep 17 00:00:00 2001 From: Bardi Harborow Date: Thu, 6 Oct 2016 12:02:52 +1100 Subject: Render bash and powershell prompts with ::before. --- docs/getting-started/contents.md | 4 ++-- docs/getting-started/download.md | 17 ++++++++++------- 2 files changed, 12 insertions(+), 9 deletions(-) (limited to 'docs/getting-started') diff --git a/docs/getting-started/contents.md b/docs/getting-started/contents.md index c54cb5eba..4f51ef049 100644 --- a/docs/getting-started/contents.md +++ b/docs/getting-started/contents.md @@ -13,7 +13,7 @@ Once downloaded, unzip the compressed folder and you'll see something like this: -{% highlight bash %} +{% highlight plaintext %} bootstrap/ ├── css/ │ ├── bootstrap.css @@ -31,7 +31,7 @@ This is the most basic form of Bootstrap: precompiled files for quick drop-in us The Bootstrap source code download includes the precompiled CSS and JavaScript assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more: -{% highlight bash %} +{% highlight plaintext %} bootstrap/ ├── dist/ │ ├── css/ diff --git a/docs/getting-started/download.md b/docs/getting-started/download.md index e3cf1e474..9aacf3113 100644 --- a/docs/getting-started/download.md +++ b/docs/getting-started/download.md @@ -25,7 +25,7 @@ Pull in Bootstrap's **source files** into nearly any project with some of the mo Install Bootstrap in your Node powered apps with [the npm package](https://www.npmjs.org/package/bootstrap): {% highlight bash %} -$ npm install bootstrap@{{ site.current_version }} +npm install bootstrap@{{ site.current_version }} {% endhighlight %} `require('bootstrap')` will load all of Bootstrap's jQuery plugins onto the jQuery object. The `bootstrap` module itself does not export anything. You can manually load Bootstrap's jQuery plugins individually by loading the `/js/*.js` files under the package's top-level directory. @@ -46,7 +46,7 @@ gem 'bootstrap', '~> 4.0.0.alpha3' Alternatively, if you're not using Bundler, you can install the gem by running this command: {% highlight bash %} -$ gem install bootstrap -v 4.0.0.alpha3 +gem install bootstrap -v 4.0.0.alpha3 {% endhighlight %} [See the gem's README](https://github.com/twbs/bootstrap-rubygem/blob/master/README.md) for further details. @@ -54,7 +54,7 @@ $ gem install bootstrap -v 4.0.0.alpha3 ### Meteor {% highlight bash %} -$ meteor add twbs:bootstrap@={{ site.current_version }} +meteor add twbs:bootstrap@={{ site.current_version }} {% endhighlight %} ### Composer @@ -62,7 +62,7 @@ $ meteor add twbs:bootstrap@={{ site.current_version }} You can also install and manage Bootstrap's Sass and JavaScript using [Composer](https://getcomposer.org): {% highlight bash %} -$ composer require twbs/bootstrap:{{ site.current_version }} +composer require twbs/bootstrap:{{ site.current_version }} {% endhighlight %} ### Bower @@ -70,7 +70,7 @@ $ composer require twbs/bootstrap:{{ site.current_version }} Install and manage Bootstrap's Sass and JavaScript using [Bower](https://bower.io). {% highlight bash %} -$ bower install bootstrap#v{{ site.current_version }} +bower install bootstrap#v{{ site.current_version }} {% endhighlight %} ### NuGet @@ -78,8 +78,11 @@ $ bower install bootstrap#v{{ site.current_version }} If you develop in .NET, you can also install and manage Bootstrap's [CSS](https://www.nuget.org/packages/bootstrap/) or [Sass](https://www.nuget.org/packages/bootstrap.sass/) and JavaScript using [NuGet](https://www.nuget.org): {% highlight powershell %} -PM> Install-Package bootstrap -Pre -PM> Install-Package bootstrap.sass -Pre +Install-Package bootstrap -Pre +{% endhighlight %} + +{% highlight powershell %} +Install-Package bootstrap.sass -Pre {% endhighlight %} The `-Pre` is required until Bootstrap v4 has a stable release. -- cgit v1.2.3 From addf93a9d29d6a8b79f26efacbd1886eee5bb78c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 10 Oct 2016 14:18:16 -0700 Subject: rework download options to mention source, compiled, and cdn --- docs/getting-started/download.md | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) (limited to 'docs/getting-started') diff --git a/docs/getting-started/download.md b/docs/getting-started/download.md index 9aacf3113..389450867 100644 --- a/docs/getting-started/download.md +++ b/docs/getting-started/download.md @@ -7,11 +7,26 @@ group: getting-started **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. +### 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, flexbox-enabled, grid only, or Reboot only) and JavaScript plugins. Doesn't include documentation or source files. + +Download Bootstrap + ### Source files -Download everything: source Sass, JavaScript, and documentation files. **Requires a Sass compiler, [Autoprefixer](https://github.com/postcss/autoprefixer), [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes), and [some setup]({{ site.baseurl }}/getting-started/build-tools/#tooling-setup).** +**Want to compile Bootstrap with your project's asset pipeline?** Choose this option to download our source Sass, JavaScript, and documentation files. Requires a Sass compiler, [Autoprefixer](https://github.com/postcss/autoprefixer), [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes), and [some setup]({{ site.baseurl }}/getting-started/build-tools/#tooling-setup). Download source +### Bootstrap CDN + +Skip the download and use the Bootstrap CDN to deliver Bootstrap's compiled CSS and JS to your project. + +{% highlight html %} + + +{% endhighlight %} + ## Package managers Pull in Bootstrap's **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will **require a Sass compiler, [Autoprefixer](https://github.com/postcss/autoprefixer), and [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes)** for a setup that matches our official compiled versions. -- cgit v1.2.3 From eaac9deec2edc7a46a8ca225374484224f7f1392 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 10 Oct 2016 14:18:28 -0700 Subject: remove commented out custom builds --- docs/getting-started/download.md | 24 ------------------------ 1 file changed, 24 deletions(-) (limited to 'docs/getting-started') diff --git a/docs/getting-started/download.md b/docs/getting-started/download.md index 389450867..448afcad3 100644 --- a/docs/getting-started/download.md +++ b/docs/getting-started/download.md @@ -101,27 +101,3 @@ Install-Package bootstrap.sass -Pre {% endhighlight %} The `-Pre` is required until Bootstrap v4 has a stable release. - -{% comment %} -## Custom builds - -Need only a part of Bootstrap's CSS or JS? Use one of the custom builds to snag just what you need. - -
-
-

Reboot

-

Includes variables/mixins, Normalize, and Reboot. No JavaScript.

- Download -
-
-

Grid only

-

Includes variables/mixins and our grid system. No JavaScript.

- Download -
-
-

Flexbox

-

All of Bootstrap with flexbox enabled and lower browser support.

- Download -
-
-{% endcomment %} -- cgit v1.2.3