aboutsummaryrefslogtreecommitdiff
path: root/docs/getting-started/customize.md
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2015-06-09 16:28:09 -0700
committerMark Otto <[email protected]>2015-06-09 16:28:09 -0700
commit5acefab4cf355bac584c3faf68f6b458bfa58e4d (patch)
treedfc93dbc2f1128927e58be303ddfe6731b11430a /docs/getting-started/customize.md
parent960cbe61624eb7dfcd9bf44b92ffff79aec0349c (diff)
downloadbootstrap-5acefab4cf355bac584c3faf68f6b458bfa58e4d.tar.xz
bootstrap-5acefab4cf355bac584c3faf68f6b458bfa58e4d.zip
spec out variables customize docs
Diffstat (limited to 'docs/getting-started/customize.md')
-rw-r--r--docs/getting-started/customize.md26
1 files changed, 15 insertions, 11 deletions
diff --git a/docs/getting-started/customize.md b/docs/getting-started/customize.md
index 72911e76e..4a2dbe1ca 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) | ... |