From d01b4eb02560ba67b61b1b2c0496e9f8281c154d Mon Sep 17 00:00:00 2001 From: m5o Date: Wed, 14 Mar 2018 16:44:38 +0100 Subject: Remove custom example plugin. (#25784) --- docs/4.0/layout/grid.md | 115 ++++++++++++++++++++++++---------------- docs/4.0/layout/media-object.md | 35 +++++++----- 2 files changed, 90 insertions(+), 60 deletions(-) (limited to 'docs/4.0/layout') diff --git a/docs/4.0/layout/grid.md b/docs/4.0/layout/grid.md index 6a7a771bb..c8dad9ecf 100644 --- a/docs/4.0/layout/grid.md +++ b/docs/4.0/layout/grid.md @@ -13,7 +13,7 @@ Bootstrap's grid system uses a series of containers, rows, and columns to layout **New to or unfamiliar with flexbox?** [Read this CSS Tricks flexbox guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background) for background, terminology, guidelines, and code snippets.
-{% example html %} +{% capture example %}
@@ -27,7 +27,8 @@ Bootstrap's grid system uses a series of containers, rows, and columns to layout
-{% endexample %} +{% endcapture %} +{% include example.html content=example %}
The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent `.container`. @@ -124,7 +125,7 @@ Utilize breakpoint-specific column classes for easy column sizing without an exp For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
-{% example html %} +{% capture example %}
@@ -146,13 +147,14 @@ For example, here are two grid layouts that apply to every device and viewport,
-{% endexample %} +{% endcapture %} +{% include example.html content=example %}
Equal-width columns can be broken into multiple lines, but there was a [Safari flexbox bug](https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items) that prevented this from working without an explicit `flex-basis` or `border`. There are workarounds for older browser versions, but they shouldn't be necessary if you're up-to-date.
-{% example html %} +{% capture example %}
Column
@@ -162,7 +164,8 @@ Equal-width columns can be broken into multiple lines, but there was a [Safari f
Column
-{% endexample %} +{% endcapture %} +{% include example.html content=example %}
### Setting one column width @@ -170,7 +173,7 @@ Equal-width columns can be broken into multiple lines, but there was a [Safari f Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.
-{% example html %} +{% capture example %}
@@ -195,7 +198,8 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
-{% endexample %} +{% endcapture %} +{% include example.html content=example %}
### Variable width content @@ -203,7 +207,7 @@ Auto-layout for flexbox grid columns also means you can set the width of one col Use `col-{breakpoint}-auto` classes to size columns based on the natural width of their content.
-{% example html %} +{% capture example %}
@@ -228,7 +232,8 @@ Use `col-{breakpoint}-auto` classes to size columns based on the natural width o
-{% endexample %} +{% endcapture %} +{% include example.html content=example %}
### Equal-width multi-row @@ -236,7 +241,7 @@ Use `col-{breakpoint}-auto` classes to size columns based on the natural width o Create equal-width columns that span multiple rows by inserting a `.w-100` where you want the columns to break to a new line. Make the breaks responsive by mixing the `.w-100` with some [responsive display utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/).
-{% example html %} +{% capture example %}
col
col
@@ -244,7 +249,8 @@ Create equal-width columns that span multiple rows by inserting a `.w-100` where
col
col
-{% endexample %} +{% endcapture %} +{% include example.html content=example %}
## Responsive classes @@ -256,7 +262,7 @@ Bootstrap's grid includes five tiers of predefined classes for building complex For grids that are the same from the smallest of devices to the largest, use the `.col` and `.col-*` classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to `.col`.
-{% example html %} +{% capture example %}
col
col
@@ -267,7 +273,8 @@ For grids that are the same from the smallest of devices to the largest, use the
col-8
col-4
-{% endexample %} +{% endcapture %} +{% include example.html content=example %}
### Stacked to horizontal @@ -275,7 +282,7 @@ For grids that are the same from the smallest of devices to the largest, use the Using a single set of `.col-sm-*` classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (`sm`).
-{% example html %} +{% capture example %}
col-sm-8
col-sm-4
@@ -285,7 +292,8 @@ Using a single set of `.col-sm-*` classes, you can create a basic grid system th
col-sm
col-sm
-{% endexample %} +{% endcapture %} +{% include example.html content=example %}
### Mix and match @@ -293,7 +301,7 @@ Using a single set of `.col-sm-*` classes, you can create a basic grid system th Don't want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.
-{% example html %} +{% capture example %}
.col-12 .col-md-8
@@ -312,7 +320,8 @@ Don't want your columns to simply stack in some grid tiers? Use a combination of
.col-6
.col-6
-{% endexample %} +{% endcapture %} +{% include example.html content=example %}
## Alignment @@ -322,7 +331,7 @@ Use flexbox alignment utilities to vertically and horizontally align columns. ### Vertical alignment
-{% example html %} +{% capture example %}
@@ -358,11 +367,12 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
-{% endexample %} +{% endcapture %} +{% include example.html content=example %}
-{% example html %} +{% capture example %}
@@ -376,13 +386,14 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
-{% endexample %} +{% endcapture %} +{% include example.html content=example %}
### Horizontal alignment
-{% example html %} +{% capture example %}
@@ -425,7 +436,8 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
-{% endexample %} +{% endcapture %} +{% include example.html content=example %}
### No gutters @@ -452,12 +464,13 @@ Here's the source code for creating these styles. Note that column overrides are In practice, here's how it looks. Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).
-{% example html %} +{% capture example %}
.col-12 .col-sm-6 .col-md-8
.col-6 .col-md-4
-{% endexample %} +{% endcapture %} +{% include example.html content=example %}
### Column wrapping @@ -465,13 +478,14 @@ In practice, here's how it looks. Note you can continue to use this with all oth If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
-{% example html %} +{% capture example %}
.col-9
.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-6
Subsequent columns continue along the new line.
-{% endexample %} +{% endcapture %} +{% include example.html content=example %}
### Column breaks @@ -479,7 +493,7 @@ If more than 12 columns are placed within a single row, each group of extra colu Breaking columns to a new line in flexbox requires a small hack: add an element with `width: 100%` wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple `.row`s, but not every implementation method can account for this.
-{% example html %} +{% capture example %}
.col-6 .col-sm-3
.col-6 .col-sm-3
@@ -490,13 +504,14 @@ Breaking columns to a new line in flexbox requires a small hack: add an element
.col-6 .col-sm-3
.col-6 .col-sm-3
-{% endexample %} +{% endcapture %} +{% include example.html content=example %}
You may also apply this break at specific breakpoints with our [responsive display utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/).
-{% example html %} +{% capture example %}
.col-6 .col-sm-4
.col-6 .col-sm-4
@@ -507,7 +522,8 @@ You may also apply this break at specific breakpoints with our [responsive displ
.col-6 .col-sm-4
.col-6 .col-sm-4
-{% endexample %} +{% endcapture %} +{% include example.html content=example %}
## Reordering @@ -517,7 +533,7 @@ You may also apply this break at specific breakpoints with our [responsive displ Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `12` across all five grid tiers.
-{% example html %} +{% capture example %}
@@ -531,13 +547,14 @@ Use `.order-` classes for controlling the **visual order** of your content. Thes
-{% endexample %} +{% endcapture %} +{% include example.html content=example %}
There are also responsive `.order-first` and `.order-last` classes that change the `order` of an element by applying `order: -1` and `order: 13` (`order: $columns + 1`), respectively. These classes can also be intermixed with the numbered `.order-*` classes as needed.
-{% example html %} +{% capture example %}
@@ -551,7 +568,8 @@ There are also responsive `.order-first` and `.order-last` classes that change t
-{% endexample %} +{% endcapture %} +{% include example.html content=example %}
### Offsetting columns @@ -563,7 +581,7 @@ You can offset grid columns in two ways: our responsive `.offset-` grid classes Move columns to the right using `.offset-md-*` classes. These classes increase the left margin of a column by `*` columns. For example, `.offset-md-4` moves `.col-md-4` over four columns.
-{% example html %} +{% capture example %}
.col-md-4
.col-md-4 .offset-md-4
@@ -575,13 +593,14 @@ Move columns to the right using `.offset-md-*` classes. These classes increase t
.col-md-6 .offset-md-3
-{% endexample %} +{% endcapture %} +{% include example.html content=example %}
In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in [the grid example]({{ site.baseurl }}/docs/{{ site.docs_version }}/examples/grid/).
-{% example html %} +{% capture example %}
.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
@@ -591,7 +610,8 @@ In addition to column clearing at responsive breakpoints, you may need to reset
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
-{% endexample %} +{% endcapture %} +{% include example.html content=example %}
#### Margin utilities @@ -599,7 +619,7 @@ In addition to column clearing at responsive breakpoints, you may need to reset With the move to flexbox in v4, you can use margin utilities like `.mr-auto` to force sibling columns away from one another.
-{% example html %} +{% capture example %}
.col-md-4
.col-md-4 .ml-auto
@@ -612,7 +632,8 @@ With the move to flexbox in v4, you can use margin utilities like `.mr-auto` to
.col-auto .mr-auto
.col-auto
-{% endexample %} +{% endcapture %} +{% include example.html content=example %}
## Nesting @@ -620,7 +641,7 @@ With the move to flexbox in v4, you can use margin utilities like `.mr-auto` to To nest your content with the default grid, add a new `.row` and set of `.col-sm-*` columns within an existing `.col-sm-*` column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).
-{% example html %} +{% capture example %}
Level 1: .col-sm-9 @@ -634,7 +655,8 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm
-{% endexample %} +{% endcapture %} +{% include example.html content=example %}
## Sass mixins @@ -723,14 +745,15 @@ You can modify the variables to your own custom values, or just use the mixins w } {% endhighlight %} -{% example html %} +{% capture example %}
Main content
Secondary content
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} ## Customizing the grid diff --git a/docs/4.0/layout/media-object.md b/docs/4.0/layout/media-object.md index 3aebe6028..70a5e6a94 100644 --- a/docs/4.0/layout/media-object.md +++ b/docs/4.0/layout/media-object.md @@ -12,7 +12,7 @@ The [media object](http://www.stubbornella.org/content/2010/06/25/the-media-obje Below is an example of a single media object. Only two classes are required—the wrapping `.media` and the `.media-body` around your content. Optional padding and margin can be controlled through [spacing utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/). -{% example html %} +{% capture example %}
Generic placeholder image
@@ -20,7 +20,8 @@ Below is an example of a single media object. Only two classes are required—th Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} {% capture callout %} ##### Flexbug #12: Inline elements aren't treated as flex items @@ -35,7 +36,7 @@ Internet Explorer 10-11 do not render inline elements like links or images (or ` Media objects can be infinitely nested, though we suggest you stop at some point. Place nested `.media` within the `.media-body` of a parent media object. -{% example html %} +{% capture example %}
Generic placeholder image
@@ -53,13 +54,14 @@ Media objects can be infinitely nested, though we suggest you stop at some point
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} ## Alignment Media in a media object can be aligned with flexbox utilities to the top (default), middle, or end of your `.media-body` content. -{% example html %} +{% capture example %}
Generic placeholder image
@@ -68,9 +70,10 @@ Media in a media object can be aligned with flexbox utilities to the top (defaul

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

-{% endexample %} +{% endcapture %} +{% include example.html content=example %} -{% example html %} +{% capture example %}
Generic placeholder image
@@ -79,9 +82,10 @@ Media in a media object can be aligned with flexbox utilities to the top (defaul

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

-{% endexample %} +{% endcapture %} +{% include example.html content=example %} -{% example html %} +{% capture example %}
Generic placeholder image
@@ -90,13 +94,14 @@ Media in a media object can be aligned with flexbox utilities to the top (defaul

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

-{% endexample %} +{% endcapture %} +{% include example.html content=example %} ## Order Change the order of content in media objects by modifying the HTML itself, or by adding some custom flexbox CSS to set the `order` property (to an integer of your choosing). -{% example html %} +{% capture example %}
Media object
@@ -104,13 +109,14 @@ Change the order of content in media objects by modifying the HTML itself, or by
Generic placeholder image
-{% endexample %} +{% endcapture %} +{% include example.html content=example %} ## Media list Because the media object has so few structural requirements, you can also use these classes on list HTML elements. On your `