From 163dd5296e9d6e4f91956b4afeb99ebc4693b4ad Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 29 May 2015 13:53:22 -0700 Subject: move flexbox to getting started --- docs/_data/nav.yml | 2 +- docs/getting-started/flexbox.md | 50 +++++++++++++++++++++++++++++++++++++++++ docs/layout/flexbox.md | 50 ----------------------------------------- 3 files changed, 51 insertions(+), 51 deletions(-) create mode 100644 docs/getting-started/flexbox.md delete mode 100644 docs/layout/flexbox.md diff --git a/docs/_data/nav.yml b/docs/_data/nav.yml index 2f814ba2b..00d59969c 100644 --- a/docs/_data/nav.yml +++ b/docs/_data/nav.yml @@ -10,6 +10,7 @@ - title: JavaScript - title: Compiling - title: Customize + - title: Flexbox - title: Support # - title: Third party support - title: Accessibility @@ -40,7 +41,6 @@ - title: Viewports - title: Print - title: Test cases - - title: Flexbox - title: Components pages: diff --git a/docs/getting-started/flexbox.md b/docs/getting-started/flexbox.md new file mode 100644 index 000000000..05a407706 --- /dev/null +++ b/docs/getting-started/flexbox.md @@ -0,0 +1,50 @@ +--- +layout: page +title: Flexbox +--- + +Flexbox support has finally come to Bootstrap. Opt-in to the new CSS layout styles with the flick of a variable or the swap of a stylesheet. + +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + +## What's included + +Flexbox support is available for a number of Bootstrap's components: + +- The entire grid system (mixins and predefined classes), which switch from `float`s to `display: flex;`. +- Input groups, which move from `display: table;` to `display: flex;`. +- The media component moves from `display: table;` and a number of hacky styles to a simple `display: flex;`. + +Vendor prefixes are provided in our compiled CSS with Autoprefixer via Grunt. + +## Why flexbox? + +In a nutshell, flexbix provides simpler and more flexible layout options in CSS. More specifically, it provides: + +- Easy vertical alignment of content within a parent element. +- Easy reordering of content across devices and screen resolutions with the help of media queries. +- Easy CSS-only equal height columns for your grid-based layouts. + +All these things are possible outside flexbox, but typically require extra hacks and workarounds to do right. + +## How it works + +If you're familiar with modifying variables in Sass—or any other CSS preprocessor—you'll be right at home to move into flexbox mode. + +1. Open the `_variables.scss` file and find the `$enable-flex` variable. +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](/getting-started/download) for more information. + +## Browser support + +Enabling flexbox means **reduced browser and device support:** + +- Internet Explorer 9 and below do not support flexbox. +- Internet Explorer 10 has a few known quirks. + +Please be extra conscious of your user base when enabling flexbox in your project. diff --git a/docs/layout/flexbox.md b/docs/layout/flexbox.md deleted file mode 100644 index 05a407706..000000000 --- a/docs/layout/flexbox.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -layout: page -title: Flexbox ---- - -Flexbox support has finally come to Bootstrap. Opt-in to the new CSS layout styles with the flick of a variable or the swap of a stylesheet. - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - -## What's included - -Flexbox support is available for a number of Bootstrap's components: - -- The entire grid system (mixins and predefined classes), which switch from `float`s to `display: flex;`. -- Input groups, which move from `display: table;` to `display: flex;`. -- The media component moves from `display: table;` and a number of hacky styles to a simple `display: flex;`. - -Vendor prefixes are provided in our compiled CSS with Autoprefixer via Grunt. - -## Why flexbox? - -In a nutshell, flexbix provides simpler and more flexible layout options in CSS. More specifically, it provides: - -- Easy vertical alignment of content within a parent element. -- Easy reordering of content across devices and screen resolutions with the help of media queries. -- Easy CSS-only equal height columns for your grid-based layouts. - -All these things are possible outside flexbox, but typically require extra hacks and workarounds to do right. - -## How it works - -If you're familiar with modifying variables in Sass—or any other CSS preprocessor—you'll be right at home to move into flexbox mode. - -1. Open the `_variables.scss` file and find the `$enable-flex` variable. -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](/getting-started/download) for more information. - -## Browser support - -Enabling flexbox means **reduced browser and device support:** - -- Internet Explorer 9 and below do not support flexbox. -- Internet Explorer 10 has a few known quirks. - -Please be extra conscious of your user base when enabling flexbox in your project. -- cgit v1.2.3