From 5acefab4cf355bac584c3faf68f6b458bfa58e4d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 9 Jun 2015 16:28:09 -0700 Subject: [PATCH] spec out variables customize docs --- docs/getting-started/customize.md | 26 +++++++++++++++----------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/docs/getting-started/customize.md b/docs/getting-started/customize.md index 72911e76e7..4a2dbe1cac 100644 --- a/docs/getting-started/customize.md +++ b/docs/getting-started/customize.md @@ -1,16 +1,20 @@ --- layout: page -title: Customizing +title: Customize CSS --- -todo: this entire page +New to Bootstrap 4, variable-based customization is a way for folks to quickly enable or disable global styles across all of Bootstrap's CSS. Simply update a variable's value and recompile using our Gruntfile. -- excluding files - - js - - css -- global SCSS settings - - border-radius - - box-shadow - - transitions - - spacer - - hover media queries +## Available variables + +You can find and customize these variables in our `_variables.scss` file. + +| Variable | Values | Description | +| --------------------------- | ---------------------------------- | ----------------------------------------------------------------------- | +| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value for our spacer utilities. | +| `$enable-flex` | `true` or `false` (default) | Swaps `float` and `display: table` styles for `display: flex`. | +| `$enable-rounded` | `true` (default) or `false` | Enables predefined `border-radius` styles on various components. | +| `$enable-shadows` | `true` or `false` (default) | Enables predefined `box-shadow` styles on various components. | +| `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` various components. | +| `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. | +| `$enable-hover-media-query` | `true` or `false` (default) | ... |