From fdfd53ac3548912b0f10303f1874dc07f9981cac Mon Sep 17 00:00:00 2001 From: Kevin Ross Date: Thu, 3 Dec 2015 15:08:00 -0600 Subject: [PATCH] implemented docs copy for bs4 content --- Gruntfile.js | 10 +- docs/content/.READONLY.txt | 6 + docs/content/figures.md | 2 +- docs/content/images.md | 14 +- docs/content/reboot.md | 317 +++++++++++++++++++++++++++++++++++++ 5 files changed, 340 insertions(+), 9 deletions(-) create mode 100644 docs/content/.READONLY.txt create mode 100644 docs/content/reboot.md diff --git a/Gruntfile.js b/Gruntfile.js index 47140704..1841f693 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -337,6 +337,14 @@ module.exports = function (grunt) { '**/*' ], dest: 'docs/components/' + }, + 'bs-docs-content': { + expand: true, + cwd: '../bootstrap/docs/content', + src: [ + '**/*' + ], + dest: 'docs/content/' } }, @@ -549,7 +557,7 @@ module.exports = function (grunt) { grunt.registerTask('docs-css', ['sass:docs', 'postcss:docs', 'postcss:examples', 'csscomb:docs', 'csscomb:examples', 'cssmin:docs']); grunt.registerTask('docs-js', ['uglify:docsJs']); grunt.registerTask('lint-docs-js', ['jscs:assets']); - grunt.registerTask('docs', ['copy:bs-docs-components', 'docs-css', 'docs-js', 'lint-docs-js', 'clean:docs', 'copy:docs']); + grunt.registerTask('docs', ['copy:bs-docs-components', 'copy:bs-docs-content', 'docs-css', 'docs-js', 'lint-docs-js', 'clean:docs', 'copy:docs']); grunt.registerTask('prep-release', ['dist', 'docs', 'jekyll:github', 'htmlmin', 'compress']); diff --git a/docs/content/.READONLY.txt b/docs/content/.READONLY.txt new file mode 100644 index 00000000..c0a06422 --- /dev/null +++ b/docs/content/.READONLY.txt @@ -0,0 +1,6 @@ +DO NOT edit files in this folder. + +These files are copied using + grunt copy:bs-docs-content + +This is done to keep samples in sync with the upstream bs4. diff --git a/docs/content/figures.md b/docs/content/figures.md index 7b3df8bd..d5727051 100644 --- a/docs/content/figures.md +++ b/docs/content/figures.md @@ -20,6 +20,6 @@ Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl {% example html %}
A generic square placeholder image with rounded corners in a figure. -
A caption for the above image.
+
A caption for the above image.
{% endexample %} diff --git a/docs/content/images.md b/docs/content/images.md index 1f9abc98..38a855a0 100644 --- a/docs/content/images.md +++ b/docs/content/images.md @@ -26,7 +26,7 @@ Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` an {% callout warning %} #### SVG images and IE 9-10 -In Internet Explorer 9-10, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats. +In Internet Explorer 9-10, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. This fix improperly sizes other image formats, so Bootstrap doesn't apply it automatically. {% endcallout %} ## Image shapes @@ -50,13 +50,13 @@ Add classes to an `` element to easily style images in any project. Align images with the [helper float classes]({{ site.baseurl }}/components/utilities/#floats) or [text alignment classes]({{ site.baseurl }}/components/utilities/#text-alignment). A simple centering class can also be used for `block` level images.
- A generic square placeholder image with rounded corners - A generic square placeholder image with rounded corners + A generic square placeholder image with rounded corners + A generic square placeholder image with rounded corners
{% highlight html %} -... -... +... +... {% endhighlight %}
@@ -68,13 +68,13 @@ Align images with the [helper float classes]({{ site.baseurl }}/components/utili {% endhighlight %}
-
+
A generic square placeholder image with rounded corners
{% highlight html %} -
+
...
{% endhighlight %} diff --git a/docs/content/reboot.md b/docs/content/reboot.md new file mode 100644 index 00000000..9631a86b --- /dev/null +++ b/docs/content/reboot.md @@ -0,0 +1,317 @@ +--- +layout: docs +title: Reboot +group: content +redirect_from: "/content/" +--- + +Part of Bootstrap's job is to provide an elegant, consistent, and simple baseline to build upon. We use Reboot, a collection of element-specific CSS changes in a single file, to kickstart that. + +Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some `` styles for a simpler baseline and later provide `.table`, `.table-bordered`, and more. + +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + +## Approach + +Here are our guidelines and reasons for choosing what to override in Reboot: + +- Update some browser default values to use `rem`s instead of `em`s for scalable component spacing. +- Avoid `margin-top`. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of `margin` is a simpler mental model. +- For easier scaling across device sizes, block elements should use `rem`s for `margin`s. +- Keep declarations of `font`-related properties to a minimum, using `inherit` whenever possible. + +## Page defaults + +The `` and `` elements are updated to provide better page-wide defaults. More specifically: + +- The `box-sizing` is globally set on every element—including `*:before` and `*:after`, to `border-box`. This ensures that the declared width of element is never exceeded due to padding or border. +- A base `font-size: 16px` is declared on the `` and `font-size: 1rem` on the `` for easy responsive type-scaling via media queryies. +- The `` also sets a global `font-family` and `line-height`. This is inherited later by some form elements to prevent font inconsistencies. +- For safety, the `` has a declared `background-color`, defaulting to `#fff`. + +## Headings and paragraphs + +All heading elements—e.g., `

`—and `

` are reset to have their `margin-top` removed. Headings have `margin-bottom: .5rem` added and paragraphs `margin-bottom: 1rem` for easy spacing. + +

+{% markdown %} +# h1 heading +Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. + +## h2 heading +Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. + +### h3 heading +Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. + +#### h4 heading +Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. + +##### h5 heading +Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. + +###### h6 heading +Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. +{% endmarkdown %} +
+ +## Lists + +All lists—`
    `, `
      `, and `
      `—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`. + +
      +{% markdown %} +* Lorem ipsum dolor sit amet +* Consectetur adipiscing elit +* Integer molestie lorem at massa +* Facilisis in pretium nisl aliquet +* Nulla volutpat aliquam velit + * Phasellus iaculis neque + * Purus sodales ultricies + * Vestibulum laoreet porttitor sem + * Ac tristique libero volutpat at +* Faucibus porta lacus fringilla vel +* Aenean sit amet erat nunc +* Eget porttitor lorem + +1. Lorem ipsum dolor sit amet +2. Consectetur adipiscing elit +3. Integer molestie lorem at massa +4. Facilisis in pretium nisl aliquet +5. Nulla volutpat aliquam velit +6. Faucibus porta lacus fringilla vel +7. Aenean sit amet erat nunc +8. Eget porttitor lorem +{% endmarkdown %} +
      + +For simpler styling, clear hierarchy, and better spacing, description lists have updated `margin`s. `
      `s reset `margin-left` to `0` and add `margin-bottom: .5rem`. `
      `s are **bolded**. + +
      +{% markdown %} +
      +
      Description lists
      +
      A description list is perfect for defining terms.
      +
      Euismod
      +
      Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
      +
      Donec id elit non mi porta gravida at eget metus.
      +
      Malesuada porta
      +
      Etiam porta sem malesuada magna mollis euismod.
      +
      +{% endmarkdown %} +
      + +## Preformatted text + +The `
      ` element is reset to remove its `margin-top` and use `rem` units for its `margin-bottom`.
+
+
      
+{% markdown %}
+
      +.example-element {
+  margin-bottom: 1rem;
+}
+
      
+{% endmarkdown %}
+
      
+
+## Tables
+
+Tables are slightly adjusted to style `

`s and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]({{ site.baseurl }}/content/tables/). + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ This is an example table, and this is its caption to describe the contents. +
Table headingTable headingTable headingTable heading
Table cellTable cellTable cellTable cell
Table cellTable cellTable cellTable cell
Table cellTable cellTable cellTable cell
+
+ +## Forms + +Various form elements have been rebooted for simpler base styles. Here are some of the most notable changes: + +- `
`s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs. +- ``s, like fieldsets, have also been restyled to be displayed as a heading of sorts. +- `
+ + +## Misc elements + +### Address + +The `
` element is updated to reset the browser default `font-style` from `italic` to `normal`. `line-height` is also now inherited, and `margin-bottom: 1rem` has been added. `
`s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with `
`. + +
+
+ Twitter, Inc.
+ 1355 Market St, Suite 900
+ San Francisco, CA 94103
+ P: (123) 456-7890 +
+ +
+ Full Name
+ first.last@example.com +
+
+ +### Blockquote + +The default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 1rem` for something more consistent with other elements. + +
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+
Someone famous in Source Title
+
+
+ +### Inline elements + +The `` element receives basic styling to make it stand out amongst paragraph text. + +
+ Nulla attr vitae elit libero, a pharetra augue. +
+ +## HTML5 `[hidden]` attribute + +HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](http://purecss.io), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden. While `[hidden]` isn't natively supported by IE9-10, the explicit declaration in our CSS gets around that problem. + +{% highlight html %} + +{% endhighlight %} + +{% callout warning %} +#### jQuery incompatibility + +`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. This could potentially change in jQuery 3, but we're not holding our breath. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements. +{% endcallout %} + +To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/components/utilities/#invisible-content) instead. + +## Click delay optimization for touch + +Traditionally, browsers on touchscreen devices have a delay of approximately 300ms between the end of a "tap" – the moment when a finger/stylus is lifted from screen – and the [`click` event](https://developer.mozilla.org/en-US/docs/Web/Events/click) being fired. This delay is necessary for these browsers to correctly handle "double-tap to zoom" gestures without prematurely triggering actions or links after the first "tap", but it can make your site feel slightly sluggish and unresponsive. + +Most mobile browsers automatically optimize away this 300ms delay for sites that use the `width=device-width` property as part of their [responsive meta tag]({{ site.baseurl }}/getting-started/introduction/#responsive-meta-tag) (as well as for sites that disable zooming, for instance with `user-scalable=no`, though this practice is strongly discouraged for accessibility and usability reasons). The biggest exceptions here are currently iOS Safari (and any other iOS WebView-based browser) – though this is likely to change in iOS 10, see [WebKit bug #150604](https://bugs.webkit.org/show_bug.cgi?id=150604) – and IE11 on Windows Phone 8.1. + +On touch-enabled laptop/desktop devices, IE11 and Microsoft Edge are currently the only browsers with "double-tap to zoom" functionality. As the [responsive meta tag]({{ site.baseurl }}/getting-started/introduction/#responsive-meta-tag) is ignored by all desktop browsers, using `width=device-width` will have no effect on the 300ms delay here. + +To address this problem in IE11 and Microsoft Edge on desktop, as well as IE11 on Windows Phone 8.1, Bootstrap explicitly uses the [`touch-action:manipulation` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) on all interactive elements (such as buttons and links). This property essentially disables double-tap functionality on those elements, eliminating the 300ms delay. + +In the case of iOS, the currently suggested approach is to use additional scripts such as [FastClick](https://github.com/ftlabs/fastclick) to explicitly work around the delay. + +For further details, see the compatibility table for [suppressing 300ms delay for touchscreen interactions](http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay).