From 4c5d298282bc9d248401812b6198c91b51e6595e Mon Sep 17 00:00:00 2001 From: David Hemphill Date: Tue, 31 Oct 2017 15:42:21 -0500 Subject: [PATCH] Add sizing docs --- docs/source/docs/height.blade.md | 117 +++++++++++++++++- docs/source/docs/max-height.blade.md | 44 ++++++- docs/source/docs/max-width.blade.md | 83 ++++++++++++- docs/source/docs/min-height.blade.md | 49 +++++++- docs/source/docs/min-width.blade.md | 43 ++++++- docs/source/docs/width.blade.md | 172 ++++++++++++++++++++++++++- 6 files changed, 484 insertions(+), 24 deletions(-) diff --git a/docs/source/docs/height.blade.md b/docs/source/docs/height.blade.md index 3d0eef786..e61127b09 100644 --- a/docs/source/docs/height.blade.md +++ b/docs/source/docs/height.blade.md @@ -5,8 +5,117 @@ title: "Height" # Height -
- Usage - Responsive - Customizing +
+ Utilities for setting the height of an element +
+ +@include('_partials.feature-badges', [ + 'responsive' => true, + 'customizable' => true, + 'hover' => false, + 'focus' => false +]) + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ClassPropertiesDescription
.h-1height: 0.25rem;Set the element's height to 0.25rem.
.h-2height: 0.5rem;Set the element's height to 0.5rem.
.h-3height: 0.75rem;Set the element's height to 0.75rem.
.h-4height: 1rem;Set the element's height to 1rem.
.h-6height: 1.5rem;Set the element's height to 1.5rem.
.h-8height: 2rem;Set the element's height to 2rem.
.h-10height: 2.5rem;Set the element's height to 2.5rem.
.h-12height: 3rem;Set the element's height to 3rem.
.h-16height: 4rem;Set the element's height to 4rem.
.h-24height: 6rem;Set the element's height to 6rem.
.h-32height: 8rem;Set the element's height to 8rem.
.h-48height: 12rem;Set the element's height to 12rem.
.h-64height: 16rem;Set the element's height to 16rem.
.h-autoheight: auto;Set the element's height to auto.
.h-pxheight: 1px;Set the element's height to 1px.
.h-fullheight: 100%;Set the element's height to 100%.
.h-screenheight: 100vhSet the element's height to 100vh.
diff --git a/docs/source/docs/max-height.blade.md b/docs/source/docs/max-height.blade.md index 774bf8422..6cc9b6022 100644 --- a/docs/source/docs/max-height.blade.md +++ b/docs/source/docs/max-height.blade.md @@ -5,8 +5,44 @@ title: "Max-Height" # Max-Height -
- Usage - Responsive - Customizing +
+ Utilities for setting the maximum height of an element
+ +@include('_partials.feature-badges', [ + 'responsive' => true, + 'customizable' => true, + 'hover' => false, + 'focus' => false +]) + +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
ClassPropertiesDescription
.max-h-fullmax-height: 100%;Set the element's maximum height to 100%.
.max-h-screenmax-height: 100vh;Set the element's maximum height to 100vh.
+
+ + diff --git a/docs/source/docs/max-width.blade.md b/docs/source/docs/max-width.blade.md index cf3d6b86b..ba09dbb58 100644 --- a/docs/source/docs/max-width.blade.md +++ b/docs/source/docs/max-width.blade.md @@ -5,8 +5,83 @@ title: "Max-Width" # Max-Width -
- Usage - Responsive - Customizing +
+ Utilities for setting the maximum width of an element
+ +@include('_partials.feature-badges', [ + 'responsive' => true, + 'customizable' => true, + 'hover' => false, + 'focus' => false +]) + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ClassPropertiesDescription
.max-w-xsmax-width: 20rem;Set the element's maximum width to 20rem.
.max-w-smmax-width: 30rem;Set the element's maximum width to 30rem.
.max-w-mdmax-width: 40rem;Set the element's maximum width to 40rem.
.max-w-lgmax-width: 50rem;Set the element's maximum width to 50rem.
.max-w-xlmax-width: 60rem;Set the element's maximum width to 60rem.
.max-w-2xlmax-width: 70rem;Set the element's maximum width to 70rem.
.max-w-3xlmax-width: 80rem;Set the element's maximum width to 80rem.
.max-w-4xlmax-width: 90rem;Set the element's maximum width to 90rem.
.max-w-5xlmax-width: 100rem;Set the element's maximum width to 100rem.
.max-w-fullmax-width: 100%;Set the element's maximum width to 100%.
+
+ diff --git a/docs/source/docs/min-height.blade.md b/docs/source/docs/min-height.blade.md index 640c9dda4..41d343250 100644 --- a/docs/source/docs/min-height.blade.md +++ b/docs/source/docs/min-height.blade.md @@ -5,8 +5,49 @@ title: "Min-Height" # Min-Height -
- Usage - Responsive - Customizing +
+ Utilities for setting the minimum height of an element
+ +@include('_partials.feature-badges', [ + 'responsive' => true, + 'customizable' => true, + 'hover' => false, + 'focus' => false +]) + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ClassPropertiesDescription
.min-h-0min-height: 0;Set the element's minimum height to 0.
.min-h-fullmin-height: 100%;Set the element's minimum height to 100%.
.min-h-screenmin-height: 100vh;Set the element's minimum height to 100vh.
+
+ + diff --git a/docs/source/docs/min-width.blade.md b/docs/source/docs/min-width.blade.md index 8bc668c7f..1e5d33bbd 100644 --- a/docs/source/docs/min-width.blade.md +++ b/docs/source/docs/min-width.blade.md @@ -5,8 +5,43 @@ title: "Min-Width" # Min-Width -
- Usage - Responsive - Customizing +
+ Utilities for setting the minimum width of an element
+ +@include('_partials.feature-badges', [ + 'responsive' => true, + 'customizable' => true, + 'hover' => false, + 'focus' => false +]) + +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
ClassPropertiesDescription
.min-w-0min-width: 0;Set the element's minimum width to 0.25rem.
.min-w-fullmin-width: 100%;Set the element's minimum width to 0.5rem.
+
+ diff --git a/docs/source/docs/width.blade.md b/docs/source/docs/width.blade.md index 6a5779fec..130555068 100644 --- a/docs/source/docs/width.blade.md +++ b/docs/source/docs/width.blade.md @@ -5,8 +5,172 @@ title: "Width" # Width -
- Usage - Responsive - Customizing +
+ Utilities for setting the width of an element +
+ +@include('_partials.feature-badges', [ + 'responsive' => true, + 'customizable' => true, + 'hover' => false, + 'focus' => false +]) + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ClassPropertiesDescription
.w-1width: 0.25rem;Set the element's width to 0.25rem.
.w-2width: 0.5rem;Set the element's width to 0.5rem.
.w-3width: 0.75rem;Set the element's width to 0.75rem.
.w-4width: 1rem;Set the element's width to 1rem.
.w-6width: 1.5rem;Set the element's width to 1.5rem.
.w-8width: 2rem;Set the element's width to 2rem.
.w-10width: 2.5rem;Set the element's width to 2.5rem.
.w-12width: 3rem;Set the element's width to 3rem.
.w-16width: 4rem;Set the element's width to 4rem.
.w-24width: 6rem;Set the element's width to 6rem.
.w-32width: 8rem;Set the element's width to 8rem.
.w-48width: 12rem;Set the element's width to 12rem.
.w-64width: 16rem;Set the element's width to 16rem.
.w-autowidth: autoSet the element's width to auto.
.w-pxwidth: 1pxSet the element's width to 1px.
.w-1/2width: 50%Set the element's width to 50%.
.w-1/3width: 33.33333%Set the element's width to 33.33333%.
.w-2/3width: 66.66667%Set the element's width to 66.66667%.
.w-1/4width: 25%Set the element's width to 25%.
.w-3/4width: 75%Set the element's width to 75%.
.w-1/5width: 20%Set the element's width to 20%.
.w-2/5width: 49%Set the element's width to 49%.
.w-3/5width: 60%Set the element's width to 60%.
.w-4/5width: 80%Set the element's width to 80%.
.w-1/6width: 16.66667%Set the element's width to 16.66667%.
.w-5/6width: 83.33333%Set the element's width to 83.33333%.
.w-fullwidth: 100%Set the element's width to 100%.
.w-screenwidth: 100vwSet the element's width to 100vw.