From 8e9a9a5960697cd8cd698ca6b4d8733bd7872de6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 26 Jul 2016 21:09:39 -0700 Subject: Enable flexbox grid CSS on our docs page - Creates new flexbox grid Sass file in our docs assets - Updates the Gruntfile to compile said new Sass file and minify the output - Update notice on flexbox docs page for how it works - Only enable compiled flexbox grid CSS in hosted docs site, not in dev (for easier and specific debugging of all flexbox features) --- docs/layout/flexbox-grid.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/layout/flexbox-grid.md') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 6d372a96c..ea4fad28b 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -9,7 +9,7 @@ Fancy a more modern grid system? [Enable flexbox support in Bootstrap](/getting- Bootstrap's flexbox grid includes support for every feature from our [default grid system](/layout/grid), and then some. Please read the [default grid system docs](/layout/grid) before proceeding through this page. Features that are covered there are only summarized here. Please note that **Internet Explorer 9 does not support flexbox**, so proceed with caution when enabling it. {% callout warning %} -**Heads up!** The flexbox grid documentation is only functional when flexbox support is explicitly enabled. +**Heads up!** This flexbox grid documentation is powered by an additional CSS file that overrides our default grid system's CSS. This is only available in our hosted docs and is disabled in development. {% endcallout %} ## Contents -- cgit v1.2.3 From 98a8e9947a5d97d8be8b664b6b8c08a7c78937a2 Mon Sep 17 00:00:00 2001 From: Scott Gauthreaux Date: Sat, 6 Aug 2016 15:33:31 -0700 Subject: Updated docs with extra auto resize example I updated the doc with an example of a flex layout of 3 columns where the center column is specified as a `.col-xs-5` to show that other columns will resize no matter what the width of the center column. Experienced bootstrap developers will expect to have to use an even number for the center column width when in reality any size will work. I believe this is quite useful information and doesn't add too much to the docs. Another option would be to make that initial example a `.col-xs-5` instead of a `.col-xs-6` to highlight this fact in the first place. --- docs/layout/flexbox-grid.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) (limited to 'docs/layout/flexbox-grid.md') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index ea4fad28b..ec5a7365e 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -59,7 +59,7 @@ When flexbox support is enabled, you can utilize breakpoint-specific column clas {% endexample %} -Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. +Auto-layout for flexbox grid columns also means you can set the width of one column and the others will 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 %} @@ -75,6 +75,17 @@ Auto-layout for flexbox grid columns also means you can set the width of one col 3 of 3
+
+
+ 1 of 3 +
+
+ 2 of 3 (wider) +
+
+ 3 of 3 +
+
{% endexample %} -- cgit v1.2.3 From a48e8199219d6bbe95079fa8fb206db1b2f5f2bf Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 11 Sep 2016 22:31:26 -0700 Subject: Fixes #19466: Document the flexbox order utils (#20697) --- docs/layout/flexbox-grid.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) (limited to 'docs/layout/flexbox-grid.md') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index ec5a7365e..d15d6fb99 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -221,3 +221,25 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt {% endexample %} + +## Reordering + +Flexbox utilities for controlling the **visual order** of your content. + +
+{% example html %} +
+
+
+ First, but unordered +
+
+ Second, but last +
+
+ Third, but first +
+
+
+{% endexample %} +
-- cgit v1.2.3 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/layout/flexbox-grid.md | 1 + 1 file changed, 1 insertion(+) (limited to 'docs/layout/flexbox-grid.md') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index d15d6fb99..0eae713b3 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -1,6 +1,7 @@ --- layout: docs title: Flexbox grid system +description: Documentation and examples for using Bootstrap's optional flexbox grid system. group: layout --- -- 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/layout/flexbox-grid.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'docs/layout/flexbox-grid.md') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 0eae713b3..80db93c93 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -5,9 +5,9 @@ description: Documentation and examples for using Bootstrap's optional flexbox g group: layout --- -Fancy a more modern grid system? [Enable flexbox support in Bootstrap](/getting-started/flexbox) to take full advantage of CSS's Flexible Box module for even more control over your site's layout, alignment, and distribution of content. +Fancy a more modern grid system? [Enable flexbox support in Bootstrap]({{ site.baseurl }}/getting-started/flexbox/) to take full advantage of CSS's Flexible Box module for even more control over your site's layout, alignment, and distribution of content. -Bootstrap's flexbox grid includes support for every feature from our [default grid system](/layout/grid), and then some. Please read the [default grid system docs](/layout/grid) before proceeding through this page. Features that are covered there are only summarized here. Please note that **Internet Explorer 9 does not support flexbox**, so proceed with caution when enabling it. +Bootstrap's flexbox grid includes support for every feature from our [default grid system]({{ site.baseurl }}/layout/grid/), and then some. Please read the [default grid system docs]({{ site.baseurl }}/layout/grid/) before proceeding through this page. Features that are covered there are only summarized here. Please note that **Internet Explorer 9 does not support flexbox**, so proceed with caution when enabling it. {% callout warning %} **Heads up!** This flexbox grid documentation is powered by an additional CSS file that overrides our default grid system's CSS. This is only available in our hosted docs and is disabled in development. @@ -22,7 +22,7 @@ Bootstrap's flexbox grid includes support for every feature from our [default gr The flexbox grid system behaves similar to our default grid system, but with a few notable differences: -- [Grid mixins](/layout/grid#sass-mixins) and [predefined classes](/layout/grid#predefined-classes) include support for flexbox. Just [enable flexbox support](/getting-started/flexbox) to utilize them as you would otherwise. +- [Grid mixins]({{ site.baseurl }}/layout/grid#sass-mixins) and [predefined classes]({{ site.baseurl }}/layout/grid#predefined-classes) include support for flexbox. Just [enable flexbox support]({{ site.baseurl }}/getting-started/flexbox/) to utilize them as you would otherwise. - Nesting, offsets, pushes, and pulls are all supported in the flexbox grid system. - Flexbox grid columns without a set width will automatically layout with equal widths. For example, four columns will each automatically be 25% wide. - Flexbox grid columns have significantly more alignment options available, including vertical alignment. -- cgit v1.2.3