From 10d940707abeafd21400a75278cc9f1d21259bae Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 11 Oct 2017 10:40:18 -0400 Subject: [PATCH] Tweak borders docs --- docs/source/styles/borders.md | 187 ----------------------------- docs/source/styles/borders/base.md | 37 ++---- 2 files changed, 10 insertions(+), 214 deletions(-) delete mode 100644 docs/source/styles/borders.md diff --git a/docs/source/styles/borders.md b/docs/source/styles/borders.md deleted file mode 100644 index 0ffefddbf..000000000 --- a/docs/source/styles/borders.md +++ /dev/null @@ -1,187 +0,0 @@ ---- -extends: _layouts.markdown -title: "Borders" ---- - -# Borders - -
- Sizes - Colors - Styles - Radius - Responsive -
- -

Sizes

- -Construct border size utilities using the `.border{-side?}{-width?}` syntax. For example, `.border` would add a `1px` border to all sides of the element, where `.border-b-4` would add a `4px` border to the bottom of the element. By default, borders are `solid`, and use the `@default-border-color`. - -
-
-
Class
-
border
-
-
-
Side (optional)
-
  All
-
t Top
-
r Right
-
b Bottom
-
l Left
-
-
-
Width (optional)
-
0 0px
-
  1px
-
2 2px
-
4 4px
-
8 8px
-
-
- -### Border size examples - -```html - -
- - -
- - -
-``` - -```less -// Using the border size utilities in Less -div { - .border; - .border-t; - .border-t-2; -} -``` - -### Customizing border sizes - -You can easily customize the border size utilities using the `@border-width-scale` variable. Please note that the entire scale must be redefined. It's not possible to add a new value to the existing scale. - -```less -// The default border width scale -@border-width-scale: - '0' 0, - default 1px, - '2' 2px, - '4' 4px, - '8' 8px, -; -``` - -

Colors

- -By default, borders use the `@default-border-color`. To override a border color, add one of the border color utilities. - -```html -
-
-
- -
-
-
- -
-``` - -```less -div { - .border-dark; - .border-dark-soft; - .border-dark-softer; - - .border-light; - .border-light-soft; - .border-light-softer; - - .border-invisible; -} -``` - -The default border colors can also be modified using the following variables. - -```less -// Variable: Default: -@border-dark: hsl(0, 0%, 82%); -@border-dark-soft: hsl(0, 0%, 90%); -@border-dark-softer: hsl(0, 0%, 96%); - -@border-light: hsl(0, 0%, 100%); -@border-light-soft: hsl(0, 0%, 60%); -@border-light-softer: hsl(0, 0%, 35%); - -@default-border-color: @border-dark-soft; -``` - -

Styles

- -By default borders styles are set to `solid`. This be modified using the border style utilities. - -```html -
-
-``` - -```less -div { - .border-dashed; - .border-dotted; -} -``` - -

Radius

- -To apply a `border-radius` to an element, using the rounded utilities. - -```less -div { - .rounded-sm; - .rounded-t-sm; - .rounded-r-sm; - .rounded-b-sm; - .rounded-l-sm; - .rounded; - .rounded-t; - .rounded-r; - .rounded-b; - .rounded-l; - .rounded-lg; - .rounded-t-lg; - .rounded-r-lg; - .rounded-b-lg; - .rounded-l-lg; - .rounded-pill; -} -``` - -

Responsive

- -The spacing utitlies can also be used with responsive prefixes: - -```html - - -
-
-
-``` - -```less -// Using the utilities in Less: - -div { - .screen(lg, { - .mt-6; - }); -} -``` - diff --git a/docs/source/styles/borders/base.md b/docs/source/styles/borders/base.md index e4706c7a7..fcf4043cf 100644 --- a/docs/source/styles/borders/base.md +++ b/docs/source/styles/borders/base.md @@ -11,9 +11,9 @@ title: "Borders" Customizing -

Sizes

+## Usage -Construct border size utilities using the `.border{-side?}{-width?}` syntax. For example, `.border` would add a `1px` border to all sides of the element, where `.border-b-4` would add a `4px` border to the bottom of the element. By default, borders are `solid`, and use the `@default-border-color`. +Add borders to any element using the `.border{-side?}{-width?}` syntax. For example, `.border` would add a `1px` border to all sides of the element, where `.border-b-4` would add a `4px` border to the bottom of the element.
@@ -22,7 +22,7 @@ Construct border size utilities using the `.border{-side?}{-width?}` syntax. For
Side (optional)
-
  All
+
  All (default)
t Top
r Right
b Bottom
@@ -31,14 +31,14 @@ Construct border size utilities using the `.border{-side?}{-width?}` syntax. For
Width (optional)
0 0px
-
  1px
+
  1px (default)
2 2px
4 4px
8 8px
-### Border size examples +### Examples ```html @@ -47,30 +47,13 @@ Construct border size utilities using the `.border{-side?}{-width?}` syntax. For
+ +
+
``` -```less -// Using the border size utilities in Less -div { - .border; - .border-t; - .border-t-2; -} -``` +## Responsive -### Customizing border sizes - -You can easily customize the border size utilities using the `@border-width-scale` variable. Please note that the entire scale must be redefined. It's not possible to add a new value to the existing scale. - -```less -// The default border width scale -@border-width-scale: - '0' 0, - default 1px, - '2' 2px, - '4' 4px, - '8' 8px, -; -``` +## Customizing