From 233ac03b1d32f0923dab7c159f18b2fda2e75b74 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 23 Oct 2017 11:00:45 -0400 Subject: [PATCH 01/13] First pass at flex docs --- docs/source/_assets/less/markdown.less | 12 +- docs/source/_assets/less/prism.less | 4 +- docs/source/_layouts/master.blade.php | 2 +- docs/source/_partials/code-sample.blade.php | 8 +- docs/source/styles/flexbox.blade.md | 607 ++++++++++++++++++++ docs/source/styles/flexbox.md | 12 - 6 files changed, 622 insertions(+), 23 deletions(-) create mode 100644 docs/source/styles/flexbox.blade.md delete mode 100644 docs/source/styles/flexbox.md diff --git a/docs/source/_assets/less/markdown.less b/docs/source/_assets/less/markdown.less index a491ca0c3..c30625d7e 100644 --- a/docs/source/_assets/less/markdown.less +++ b/docs/source/_assets/less/markdown.less @@ -2,6 +2,7 @@ .subnav, .subnav& { @apply .flex; @apply .mt-6; + @apply .mb-6; @apply .pb-2; @apply .border-b; @@ -31,14 +32,15 @@ @apply .p-1; @apply .leading-none; @apply .whitespace-no-wrap; - @apply .text-pink; + @apply .text-purple; @apply .font-mono; - vertical-align: middle; + @apply .align-baseline; + font-weight: 400; } > pre, pre& { @apply .font-mono; - @apply .font-normal; + font-weight: 400; } > blockquote, blockquote& { @@ -66,11 +68,11 @@ > h3, h3& { @apply .mt-12; - @apply .mb-8; + @apply .mb-4; @apply .text-slate-darker; @apply .leading-none; @apply .font-semibold; - @apply .text-lg; + @apply .text-base; } > p, p&, > blockquote > p { diff --git a/docs/source/_assets/less/prism.less b/docs/source/_assets/less/prism.less index 9566f3d32..32852e2bc 100644 --- a/docs/source/_assets/less/prism.less +++ b/docs/source/_assets/less/prism.less @@ -26,6 +26,8 @@ pre[class*="language-"] { -moz-hyphens: none; -ms-hyphens: none; hyphens: none; + + font-weight: 400; } pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, @@ -114,7 +116,7 @@ pre[class*="language-"] { .token.atrule, .token.attr-value, .token.keyword { - @apply .text-purple-dark; + @apply .text-purple; // color: #07a; } diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php index 3b3ba7a38..2e5ca4145 100644 --- a/docs/source/_layouts/master.blade.php +++ b/docs/source/_layouts/master.blade.php @@ -1,5 +1,5 @@ - + diff --git a/docs/source/_partials/code-sample.blade.php b/docs/source/_partials/code-sample.blade.php index 8002352be..7c6366339 100644 --- a/docs/source/_partials/code-sample.blade.php +++ b/docs/source/_partials/code-sample.blade.php @@ -1,8 +1,8 @@ -
-
+
+
{{ $slot }}
-
- 
{{ e($code ?? $slot) }}
+
+ 
{{ e($code ?? $slot) }}
diff --git a/docs/source/styles/flexbox.blade.md b/docs/source/styles/flexbox.blade.md new file mode 100644 index 000000000..6e342c7ea --- /dev/null +++ b/docs/source/styles/flexbox.blade.md @@ -0,0 +1,607 @@ +--- +extends: _layouts.markdown +title: "Flexbox" +--- + +# Flexbox + +
+ Usage + Responsive + Customizing +
+ +Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS. + +## Flex Containers + +Use `.flex` to create a block-level flex container: + +@component('_partials.code-sample') +
+
1
+
2
+
3
+
+@endcomponent + +Use `.inline-flex` to create an inline flex container: + +@component('_partials.code-sample') +
+
1
+
2
+
3
+
+@endcomponent + +### Flex Direction + +Use `.flex-row` to position flex items horizontally in the same direction as text *(this is also the default behavior)*: + +@component('_partials.code-sample') +
+
1
+
2
+
3
+
+@endcomponent + + +Use `.flex-row-reverse` to position flex items horizontally in the opposite direction: + +@component('_partials.code-sample') +
+
1
+
2
+
3
+
+@endcomponent + + +Use `.flex-col` to position flex items vertically: + +@component('_partials.code-sample') +
+
1
+
2
+
3
+
+@endcomponent + + +Use `.flex-col-reverse` to position flex items vertically in the opposite direction: + +@component('_partials.code-sample') +
+
1
+
2
+
3
+
+@endcomponent + +### Flex Wrap + +Use `.flex-nowrap` to prevent flex items from wrapping *(this is also the default behavior)*: + +@component('_partials.code-sample') +
+
+
1
+
+
+
2
+
+
+
3
+
+
+@endcomponent + +Use `.flex-wrap` to allow flex items to wrap: + +@component('_partials.code-sample') +
+
+
1
+
+
+
2
+
+
+
3
+
+
+@endcomponent + +Use `.flex-wrap-reverse` to wrap flex items in the reverse direction: + +@component('_partials.code-sample') +
+
+
1
+
+
+
2
+
+
+
3
+
+
+@endcomponent + +### Justify Content + +Use `.justify-start` to justify items against the start of the flex container's main axis *(this is also the default behavior)*: + +@component('_partials.code-sample') +
+
1
+
2
+
3
+
+@endcomponent + +Use `.justify-end` to justify items against the end of the flex container's main axis: + +@component('_partials.code-sample') +
+
1
+
2
+
3
+
+@endcomponent + +Use `.justify-center` to justify items along the center of the flex container's main axis: + +@component('_partials.code-sample') +
+
1
+
2
+
3
+
+@endcomponent + +Use `.justify-between` to justify items along the flex container's main axis such that there is an equal amount of space between each item: + +@component('_partials.code-sample') +
+
1
+
2
+
3
+
+@endcomponent + +Use `.justify-around` to justify items along the flex container's main axis such that there is an equal amount of space around each item: + +@component('_partials.code-sample') +
+
1
+
2
+
3
+
+@endcomponent + +### Align Items + +Use `.items-stretch` to stretch items to fill the flex container's cross axis *(this is also the default behavior)*: + +@component('_partials.code-sample') +
+
1
+
2
+
3
+
+@endcomponent + +Use `.items-start` to align items to the start of the flex container's cross axis: + +@component('_partials.code-sample') +
+
1
+
2
+
3
+
+@endcomponent + +Use `.items-end` to align items to the end of the flex container's cross axis: + +@component('_partials.code-sample') +
+
1
+
2
+
3
+
+@endcomponent + +Use `.items-center` to align items along the center of the flex container's cross axis: + +@component('_partials.code-sample') +
+
1
+
2
+
3
+
+@endcomponent + +Use `.items-baseline` to align items along the flex container's cross axis such that all of their baselines align: + +@component('_partials.code-sample') +
+
1
+
2
+
3
+
+@endcomponent + +### Align Content + +Use `.content-start` to pack lines in a flex container against the start of the main axis *(this is also the default behavior)*: + +@component('_partials.code-sample') +
+
+
1
+
+
+
2
+
+
+
3
+
+
+
4
+
+
+
5
+
+
+@endcomponent + +Use `.content-center` to pack lines in a flex container in the center of the main axis: + +@component('_partials.code-sample') +
+
+
1
+
+
+
2
+
+
+
3
+
+
+
4
+
+
+
5
+
+
+@endcomponent + +Use `.content-end` to pack lines in a flex container against the end of the main axis: + +@component('_partials.code-sample') +
+
+
1
+
+
+
2
+
+
+
3
+
+
+
4
+
+
+
5
+
+
+@endcomponent + +Use `.content-between` to distribute lines in a flex container such that there is an equal amount of space between each line: + +@component('_partials.code-sample') +
+
+
1
+
+
+
2
+
+
+
3
+
+
+
4
+
+
+
5
+
+
+@endcomponent + +Use `.content-around` to distribute lines in a flex container such that there is an equal amount of space around each line: + +@component('_partials.code-sample') +
+
+
1
+
+
+
2
+
+
+
3
+
+
+
4
+
+
+
5
+
+
+@endcomponent + +## Flex Items + +Use `.flex-1` to allow a flex item to grow and shrink as needed, ignoring it's initial size: + +@component('_partials.code-sample') +

Default behavior

+
+
+ Short +
+
+ Medium length +
+
+ Significantly larger amount of content +
+
+

With .flex-1

+
+
+ Short +
+
+ Medium length +
+
+ Significantly larger amount of content +
+
+ +@slot('code') +
+
+ Short +
+
+ Medium length +
+
+ Significantly larger amount of content +
+
+@endslot +@endcomponent + +Use `.flex-auto` to allow a flex item to grow and shrink, taking into account it's initial size: + +@component('_partials.code-sample') +

Default behavior

+
+
+ Short +
+
+ Medium length +
+
+ Significantly larger amount of content +
+
+

With .flex-auto

+
+
+ Short +
+
+ Medium length +
+
+ Significantly larger amount of content +
+
+ +@slot('code') +
+
+ Short +
+
+ Medium length +
+
+ Significantly larger amount of content +
+
+@endslot +@endcomponent + +Use `.flex-initial` to allow a flex item to shrink but not grow, taking into account it's initial size *(this is also the default behavior)*: + +@component('_partials.code-sample') +

Items don't grow when there's extra space

+
+
+ Short +
+
+ Medium length +
+
+ +

Items shrink if possible when needed

+
+
+ Short +
+
+ Medium length +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem +
+
+ +@slot('code') +
+
+ Short +
+
+ Medium length +
+
+ +
+
+ Short +
+
+ Medium length +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem +
+
+@endslot +@endcomponent + +Use `.flex-grow` to allow a flex item to grow to fill any available space: + +@component('_partials.code-sample') +
+
+ Content that cannot flex +
+
+ Item that will grow +
+
+ Content that cannot flex +
+
+@endcomponent + +Use `.flex-shrink` to allow a flex item to shrink if needed: + +@component('_partials.code-sample') +
+
+ Longer content that cannot flex +
+
+ Item that will shrink even if it causes the content to wrap +
+
+ Longer content that cannot flex +
+
+@endcomponent + +Use `.flex-no-grow` to prevent a flex item from growing: + +@component('_partials.code-sample') +
+
+ Will grow +
+
+ Will not grow +
+
+ Will grow +
+
+@endcomponent + +Use `.flex-no-shrink` to prevent a flex item from shrinking: + +@component('_partials.code-sample') +
+
+ Item that can shrink if needed +
+
+ Item that cannot shrink below it's initial size +
+
+ Item that can shrink if needed +
+
+@endcomponent + +Use `.flex-none` to prevent a flex item from growing or shrinking: + +@component('_partials.code-sample') +
+
+ Item that can shrink if needed +
+
+ Item that cannot grow or shrink +
+
+ Item that can shrink if needed +
+
+@endcomponent + +### Align Self + +Use `.self-start` to align an item to the start of the flex container's cross axis, despite the container's `align-items` value: + +@component('_partials.code-sample') +
+
1
+
2
+
3
+
+@endcomponent + +Use `.self-end` to align an item to the end of the flex container's cross axis, despite the container's `align-items` value: + +@component('_partials.code-sample') +
+
1
+
2
+
3
+
+@endcomponent + +Use `.self-center` to align an item along the center of the flex container's cross axis, despite the container's `align-items` value: + +@component('_partials.code-sample') +
+
1
+
2
+
3
+
+@endcomponent + +Use `.self-stretch` to stretch an item to fill the flex container's cross axis, despite the container's `align-items` value: + +@component('_partials.code-sample') +
+
1
+
2
+
3
+
+@endcomponent diff --git a/docs/source/styles/flexbox.md b/docs/source/styles/flexbox.md deleted file mode 100644 index 59ee194fe..000000000 --- a/docs/source/styles/flexbox.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -extends: _layouts.markdown -title: "Flexbox" ---- - -# Flexbox - -
- Usage - Responsive - Customizing -
From b0b4ac71d0b608eca31843137f707b119f7cfb11 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 23 Oct 2017 15:31:31 -0400 Subject: [PATCH 02/13] Add subheadings for each utility --- docs/source/styles/flexbox.blade.md | 165 +++++++++++++++++++++------- 1 file changed, 128 insertions(+), 37 deletions(-) diff --git a/docs/source/styles/flexbox.blade.md b/docs/source/styles/flexbox.blade.md index 6e342c7ea..3a1845e45 100644 --- a/docs/source/styles/flexbox.blade.md +++ b/docs/source/styles/flexbox.blade.md @@ -13,7 +13,9 @@ title: "Flexbox" Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS. -## Flex Containers +## Display + +### Flex Use `.flex` to create a block-level flex container: @@ -25,6 +27,8 @@ Use `.flex` to create a block-level flex container:
@endcomponent +### Inline flex + Use `.inline-flex` to create an inline flex container: @component('_partials.code-sample') @@ -35,7 +39,11 @@ Use `.inline-flex` to create an inline flex container:
@endcomponent -### Flex Direction +--- + +## Flex Direction + +### Row Use `.flex-row` to position flex items horizontally in the same direction as text *(this is also the default behavior)*: @@ -47,6 +55,7 @@ Use `.flex-row` to position flex items horizontally in the same direction as tex
@endcomponent +### Row reversed Use `.flex-row-reverse` to position flex items horizontally in the opposite direction: @@ -58,6 +67,7 @@ Use `.flex-row-reverse` to position flex items horizontally in the opposite dire @endcomponent +### Column Use `.flex-col` to position flex items vertically: @@ -69,6 +79,7 @@ Use `.flex-col` to position flex items vertically: @endcomponent +### Column reversed Use `.flex-col-reverse` to position flex items vertically in the opposite direction: @@ -80,7 +91,11 @@ Use `.flex-col-reverse` to position flex items vertically in the opposite direct @endcomponent -### Flex Wrap +--- + +## Flex Wrapping + +### No wrapping Use `.flex-nowrap` to prevent flex items from wrapping *(this is also the default behavior)*: @@ -98,6 +113,8 @@ Use `.flex-nowrap` to prevent flex items from wrapping *(this is also the defaul @endcomponent +### Wrap normally + Use `.flex-wrap` to allow flex items to wrap: @component('_partials.code-sample') @@ -114,6 +131,8 @@ Use `.flex-wrap` to allow flex items to wrap: @endcomponent +### Wrap reversed + Use `.flex-wrap-reverse` to wrap flex items in the reverse direction: @component('_partials.code-sample') @@ -130,7 +149,11 @@ Use `.flex-wrap-reverse` to wrap flex items in the reverse direction: @endcomponent -### Justify Content +--- + +## Justify Content + +### Start Use `.justify-start` to justify items against the start of the flex container's main axis *(this is also the default behavior)*: @@ -142,6 +165,8 @@ Use `.justify-start` to justify items against the start of the flex container's @endcomponent +### End + Use `.justify-end` to justify items against the end of the flex container's main axis: @component('_partials.code-sample') @@ -152,6 +177,8 @@ Use `.justify-end` to justify items against the end of the flex container's main @endcomponent +### Center + Use `.justify-center` to justify items along the center of the flex container's main axis: @component('_partials.code-sample') @@ -162,6 +189,8 @@ Use `.justify-center` to justify items along the center of the flex container's @endcomponent +### Space between + Use `.justify-between` to justify items along the flex container's main axis such that there is an equal amount of space between each item: @component('_partials.code-sample') @@ -172,6 +201,8 @@ Use `.justify-between` to justify items along the flex container's main axis suc @endcomponent +### Space around + Use `.justify-around` to justify items along the flex container's main axis such that there is an equal amount of space around each item: @component('_partials.code-sample') @@ -182,7 +213,11 @@ Use `.justify-around` to justify items along the flex container's main axis such @endcomponent -### Align Items +--- + +## Align Items + +### Stretch Use `.items-stretch` to stretch items to fill the flex container's cross axis *(this is also the default behavior)*: @@ -194,6 +229,8 @@ Use `.items-stretch` to stretch items to fill the flex container's cross axis *( @endcomponent +### Start + Use `.items-start` to align items to the start of the flex container's cross axis: @component('_partials.code-sample') @@ -204,6 +241,8 @@ Use `.items-start` to align items to the start of the flex container's cross axi @endcomponent +### End + Use `.items-end` to align items to the end of the flex container's cross axis: @component('_partials.code-sample') @@ -214,6 +253,8 @@ Use `.items-end` to align items to the end of the flex container's cross axis: @endcomponent +### Center + Use `.items-center` to align items along the center of the flex container's cross axis: @component('_partials.code-sample') @@ -224,6 +265,8 @@ Use `.items-center` to align items along the center of the flex container's cros @endcomponent +### Baseline + Use `.items-baseline` to align items along the flex container's cross axis such that all of their baselines align: @component('_partials.code-sample') @@ -234,7 +277,11 @@ Use `.items-baseline` to align items along the flex container's cross axis such @endcomponent -### Align Content +--- + +## Align Content + +### Start Use `.content-start` to pack lines in a flex container against the start of the main axis *(this is also the default behavior)*: @@ -258,6 +305,8 @@ Use `.content-start` to pack lines in a flex container against the start of the @endcomponent +### Center + Use `.content-center` to pack lines in a flex container in the center of the main axis: @component('_partials.code-sample') @@ -280,6 +329,8 @@ Use `.content-center` to pack lines in a flex container in the center of the mai @endcomponent +### End + Use `.content-end` to pack lines in a flex container against the end of the main axis: @component('_partials.code-sample') @@ -302,6 +353,8 @@ Use `.content-end` to pack lines in a flex container against the end of the main @endcomponent +### Space between + Use `.content-between` to distribute lines in a flex container such that there is an equal amount of space between each line: @component('_partials.code-sample') @@ -324,6 +377,8 @@ Use `.content-between` to distribute lines in a flex container such that there i @endcomponent +### Space around + Use `.content-around` to distribute lines in a flex container such that there is an equal amount of space around each line: @component('_partials.code-sample') @@ -346,7 +401,11 @@ Use `.content-around` to distribute lines in a flex container such that there is @endcomponent -## Flex Items +--- + +## Flex + +### 1 Use `.flex-1` to allow a flex item to grow and shrink as needed, ignoring it's initial size: @@ -391,6 +450,8 @@ Use `.flex-1` to allow a flex item to grow and shrink as needed, ignoring it's i @endslot @endcomponent +### Auto + Use `.flex-auto` to allow a flex item to grow and shrink, taking into account it's initial size: @component('_partials.code-sample') @@ -434,6 +495,26 @@ Use `.flex-auto` to allow a flex item to grow and shrink, taking into account it @endslot @endcomponent +### None + +Use `.flex-none` to prevent a flex item from growing or shrinking: + +@component('_partials.code-sample') +
+
+ Item that can grow or shrink if needed +
+
+ Item that cannot grow or shrink +
+
+ Item that can grow or shrink if needed +
+
+@endcomponent + +### Initial + Use `.flex-initial` to allow a flex item to shrink but not grow, taking into account it's initial size *(this is also the default behavior)*: @component('_partials.code-sample') @@ -484,6 +565,12 @@ Use `.flex-initial` to allow a flex item to shrink but not grow, taking into acc @endslot @endcomponent +--- + +## Flex Grow + +### Grow + Use `.flex-grow` to allow a flex item to grow to fill any available space: @component('_partials.code-sample') @@ -500,21 +587,7 @@ Use `.flex-grow` to allow a flex item to grow to fill any available space: @endcomponent -Use `.flex-shrink` to allow a flex item to shrink if needed: - -@component('_partials.code-sample') -
-
- Longer content that cannot flex -
-
- Item that will shrink even if it causes the content to wrap -
-
- Longer content that cannot flex -
-
-@endcomponent +### Don't grow Use `.flex-no-grow` to prevent a flex item from growing: @@ -532,6 +605,30 @@ Use `.flex-no-grow` to prevent a flex item from growing: @endcomponent +--- + +## Flex shrink + +### Shrink + +Use `.flex-shrink` to allow a flex item to shrink if needed: + +@component('_partials.code-sample') +
+
+ Longer content that cannot flex +
+
+ Item that will shrink even if it causes the content to wrap +
+
+ Longer content that cannot flex +
+
+@endcomponent + +### Don't shrink + Use `.flex-no-shrink` to prevent a flex item from shrinking: @component('_partials.code-sample') @@ -548,23 +645,11 @@ Use `.flex-no-shrink` to prevent a flex item from shrinking: @endcomponent -Use `.flex-none` to prevent a flex item from growing or shrinking: +--- -@component('_partials.code-sample') -
-
- Item that can shrink if needed -
-
- Item that cannot grow or shrink -
-
- Item that can shrink if needed -
-
-@endcomponent +## Align Self -### Align Self +### Start Use `.self-start` to align an item to the start of the flex container's cross axis, despite the container's `align-items` value: @@ -576,6 +661,8 @@ Use `.self-start` to align an item to the start of the flex container's cross ax @endcomponent +### End + Use `.self-end` to align an item to the end of the flex container's cross axis, despite the container's `align-items` value: @component('_partials.code-sample') @@ -586,6 +673,8 @@ Use `.self-end` to align an item to the end of the flex container's cross axis, @endcomponent +### Center + Use `.self-center` to align an item along the center of the flex container's cross axis, despite the container's `align-items` value: @component('_partials.code-sample') @@ -596,6 +685,8 @@ Use `.self-center` to align an item along the center of the flex container's cro @endcomponent +### Stretch + Use `.self-stretch` to stretch an item to fill the flex container's cross axis, despite the container's `align-items` value: @component('_partials.code-sample') From b0dda815648ce7dab0186205daa6e6f623dd16d1 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 23 Oct 2017 16:27:11 -0400 Subject: [PATCH 03/13] Working on splitting flex docs into multiple pages --- docs/source/_layouts/master.blade.php | 22 +- .../styles/flexbox/align-content.blade.md | 134 +++++++++ .../styles/flexbox/align-items.blade.md | 74 +++++ .../source/styles/flexbox/align-self.blade.md | 62 +++++ .../source/styles/flexbox/containers.blade.md | 38 +++ docs/source/styles/flexbox/direction.blade.md | 62 +++++ .../styles/flexbox/flex-grow-shrink.blade.md | 256 ++++++++++++++++++ .../styles/flexbox/justify-content.blade.md | 76 ++++++ docs/source/styles/flexbox/wrapping.blade.md | 68 +++++ docs/tailwind.js | 4 +- 10 files changed, 789 insertions(+), 7 deletions(-) create mode 100644 docs/source/styles/flexbox/align-content.blade.md create mode 100644 docs/source/styles/flexbox/align-items.blade.md create mode 100644 docs/source/styles/flexbox/align-self.blade.md create mode 100644 docs/source/styles/flexbox/containers.blade.md create mode 100644 docs/source/styles/flexbox/direction.blade.md create mode 100644 docs/source/styles/flexbox/flex-grow-shrink.blade.md create mode 100644 docs/source/styles/flexbox/justify-content.blade.md create mode 100644 docs/source/styles/flexbox/wrapping.blade.md diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php index 2e5ca4145..b751d06bd 100644 --- a/docs/source/_layouts/master.blade.php +++ b/docs/source/_layouts/master.blade.php @@ -17,7 +17,7 @@
- Tailwind CSS + Tailwind CSS {{-- --}} {{-- Tailwind CSS --}} {{-- --}} @@ -91,10 +91,22 @@
  • Radius
    • -
  • Buttons
    • -
  • Container
    • -
  • Display
    • -
  • Flexbox
    • +
  • Buttons
    • +
  • Container
    • +
  • Display
    • +
  • + Flexbox + +
  • Floats
  • Forms
  • Grid
    • diff --git a/docs/source/styles/flexbox/align-content.blade.md b/docs/source/styles/flexbox/align-content.blade.md new file mode 100644 index 000000000..18f2c1592 --- /dev/null +++ b/docs/source/styles/flexbox/align-content.blade.md @@ -0,0 +1,134 @@ +--- +extends: _layouts.markdown +title: "Flexbox" +--- + +# Align Content + +
    + Usage + Responsive + Customizing +
    + +Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS. + +### Start + +Use `.content-start` to pack lines in a flex container against the start of the main axis *(this is also the default behavior)*: + +@component('_partials.code-sample') +
    +
    +
    1
    +
    +
    +
    2
    +
    +
    +
    3
    +
    +
    +
    4
    +
    +
    +
    5
    +
    +
    +@endcomponent + +### Center + +Use `.content-center` to pack lines in a flex container in the center of the main axis: + +@component('_partials.code-sample') +
    +
    +
    1
    +
    +
    +
    2
    +
    +
    +
    3
    +
    +
    +
    4
    +
    +
    +
    5
    +
    +
    +@endcomponent + +### End + +Use `.content-end` to pack lines in a flex container against the end of the main axis: + +@component('_partials.code-sample') +
    +
    +
    1
    +
    +
    +
    2
    +
    +
    +
    3
    +
    +
    +
    4
    +
    +
    +
    5
    +
    +
    +@endcomponent + +### Space between + +Use `.content-between` to distribute lines in a flex container such that there is an equal amount of space between each line: + +@component('_partials.code-sample') +
    +
    +
    1
    +
    +
    +
    2
    +
    +
    +
    3
    +
    +
    +
    4
    +
    +
    +
    5
    +
    +
    +@endcomponent + +### Space around + +Use `.content-around` to distribute lines in a flex container such that there is an equal amount of space around each line: + +@component('_partials.code-sample') +
    +
    +
    1
    +
    +
    +
    2
    +
    +
    +
    3
    +
    +
    +
    4
    +
    +
    +
    5
    +
    +
    +@endcomponent diff --git a/docs/source/styles/flexbox/align-items.blade.md b/docs/source/styles/flexbox/align-items.blade.md new file mode 100644 index 000000000..bd55cd3c9 --- /dev/null +++ b/docs/source/styles/flexbox/align-items.blade.md @@ -0,0 +1,74 @@ +--- +extends: _layouts.markdown +title: "Flexbox" +--- + +# Align Items + +
    + Usage + Responsive + Customizing +
    + +Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS. + +### Stretch + +Use `.items-stretch` to stretch items to fill the flex container's cross axis *(this is also the default behavior)*: + +@component('_partials.code-sample') +
    +
    1
    +
    2
    +
    3
    +
    +@endcomponent + +### Start + +Use `.items-start` to align items to the start of the flex container's cross axis: + +@component('_partials.code-sample') +
    +
    1
    +
    2
    +
    3
    +
    +@endcomponent + +### End + +Use `.items-end` to align items to the end of the flex container's cross axis: + +@component('_partials.code-sample') +
    +
    1
    +
    2
    +
    3
    +
    +@endcomponent + +### Center + +Use `.items-center` to align items along the center of the flex container's cross axis: + +@component('_partials.code-sample') +
    +
    1
    +
    2
    +
    3
    +
    +@endcomponent + +### Baseline + +Use `.items-baseline` to align items along the flex container's cross axis such that all of their baselines align: + +@component('_partials.code-sample') +
    +
    1
    +
    2
    +
    3
    +
    +@endcomponent diff --git a/docs/source/styles/flexbox/align-self.blade.md b/docs/source/styles/flexbox/align-self.blade.md new file mode 100644 index 000000000..5b13d63f0 --- /dev/null +++ b/docs/source/styles/flexbox/align-self.blade.md @@ -0,0 +1,62 @@ +--- +extends: _layouts.markdown +title: "Flexbox" +--- + +# Align Self + +
    + Usage + Responsive + Customizing +
    + +Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS. + +### Start + +Use `.self-start` to align an item to the start of the flex container's cross axis, despite the container's `align-items` value: + +@component('_partials.code-sample') +
    +
    1
    +
    2
    +
    3
    +
    +@endcomponent + +### End + +Use `.self-end` to align an item to the end of the flex container's cross axis, despite the container's `align-items` value: + +@component('_partials.code-sample') +
    +
    1
    +
    2
    +
    3
    +
    +@endcomponent + +### Center + +Use `.self-center` to align an item along the center of the flex container's cross axis, despite the container's `align-items` value: + +@component('_partials.code-sample') +
    +
    1
    +
    2
    +
    3
    +
    +@endcomponent + +### Stretch + +Use `.self-stretch` to stretch an item to fill the flex container's cross axis, despite the container's `align-items` value: + +@component('_partials.code-sample') +
    +
    1
    +
    2
    +
    3
    +
    +@endcomponent diff --git a/docs/source/styles/flexbox/containers.blade.md b/docs/source/styles/flexbox/containers.blade.md new file mode 100644 index 000000000..aac188fb6 --- /dev/null +++ b/docs/source/styles/flexbox/containers.blade.md @@ -0,0 +1,38 @@ +--- +extends: _layouts.markdown +title: "Flex Containers" +--- + +# Flex Containers + +
    + Usage + Responsive + Customizing +
    + +Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS. + +### Flex + +Use `.flex` to create a block-level flex container: + +@component('_partials.code-sample') +
    +
    1
    +
    2
    +
    3
    +
    +@endcomponent + +### Inline flex + +Use `.inline-flex` to create an inline flex container: + +@component('_partials.code-sample') +
    +
    1
    +
    2
    +
    3
    +
    +@endcomponent diff --git a/docs/source/styles/flexbox/direction.blade.md b/docs/source/styles/flexbox/direction.blade.md new file mode 100644 index 000000000..fcb648eb1 --- /dev/null +++ b/docs/source/styles/flexbox/direction.blade.md @@ -0,0 +1,62 @@ +--- +extends: _layouts.markdown +title: "Flexbox" +--- + +# Flex Direction + +
    + Usage + Responsive + Customizing +
    + +Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS. + +### Row + +Use `.flex-row` to position flex items horizontally in the same direction as text *(this is also the default behavior)*: + +@component('_partials.code-sample') +
    +
    1
    +
    2
    +
    3
    +
    +@endcomponent + +### Row reversed + +Use `.flex-row-reverse` to position flex items horizontally in the opposite direction: + +@component('_partials.code-sample') +
    +
    1
    +
    2
    +
    3
    +
    +@endcomponent + +### Column + +Use `.flex-col` to position flex items vertically: + +@component('_partials.code-sample') +
    +
    1
    +
    2
    +
    3
    +
    +@endcomponent + +### Column reversed + +Use `.flex-col-reverse` to position flex items vertically in the opposite direction: + +@component('_partials.code-sample') +
    +
    1
    +
    2
    +
    3
    +
    +@endcomponent diff --git a/docs/source/styles/flexbox/flex-grow-shrink.blade.md b/docs/source/styles/flexbox/flex-grow-shrink.blade.md new file mode 100644 index 000000000..836784045 --- /dev/null +++ b/docs/source/styles/flexbox/flex-grow-shrink.blade.md @@ -0,0 +1,256 @@ +--- +extends: _layouts.markdown +title: "Flexbox" +--- + +# Flex, Grow, & Shrink + +
    + Usage + Responsive + Customizing +
    + +Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS. + +## Flex + +### 1 + +Use `.flex-1` to allow a flex item to grow and shrink as needed, ignoring it's initial size: + +@component('_partials.code-sample') +

    Default behavior

    +
    +
    + Short +
    +
    + Medium length +
    +
    + Significantly larger amount of content +
    +
    +

    With .flex-1

    +
    +
    + Short +
    +
    + Medium length +
    +
    + Significantly larger amount of content +
    +
    + +@slot('code') +
    +
    + Short +
    +
    + Medium length +
    +
    + Significantly larger amount of content +
    +
    +@endslot +@endcomponent + +### Auto + +Use `.flex-auto` to allow a flex item to grow and shrink, taking into account it's initial size: + +@component('_partials.code-sample') +

    Default behavior

    +
    +
    + Short +
    +
    + Medium length +
    +
    + Significantly larger amount of content +
    +
    +

    With .flex-auto

    +
    +
    + Short +
    +
    + Medium length +
    +
    + Significantly larger amount of content +
    +
    + +@slot('code') +
    +
    + Short +
    +
    + Medium length +
    +
    + Significantly larger amount of content +
    +
    +@endslot +@endcomponent + +### None + +Use `.flex-none` to prevent a flex item from growing or shrinking: + +@component('_partials.code-sample') +
    +
    + Item that can grow or shrink if needed +
    +
    + Item that cannot grow or shrink +
    +
    + Item that can grow or shrink if needed +
    +
    +@endcomponent + +### Initial + +Use `.flex-initial` to allow a flex item to shrink but not grow, taking into account it's initial size *(this is also the default behavior)*: + +@component('_partials.code-sample') +

    Items don't grow when there's extra space

    +
    +
    + Short +
    +
    + Medium length +
    +
    + +

    Items shrink if possible when needed

    +
    +
    + Short +
    +
    + Medium length +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem +
    +
    + +@slot('code') +
    +
    + Short +
    +
    + Medium length +
    +
    + +
    +
    + Short +
    +
    + Medium length +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem +
    +
    +@endslot +@endcomponent + +--- + +## Flex Grow + +### Grow + +Use `.flex-grow` to allow a flex item to grow to fill any available space: + +@component('_partials.code-sample') +
    +
    + Content that cannot flex +
    +
    + Item that will grow +
    +
    + Content that cannot flex +
    +
    +@endcomponent + +### Don't grow + +Use `.flex-no-grow` to prevent a flex item from growing: + +@component('_partials.code-sample') +
    +
    + Will grow +
    +
    + Will not grow +
    +
    + Will grow +
    +
    +@endcomponent + +--- + +## Flex shrink + +### Shrink + +Use `.flex-shrink` to allow a flex item to shrink if needed: + +@component('_partials.code-sample') +
    +
    + Longer content that cannot flex +
    +
    + Item that will shrink even if it causes the content to wrap +
    +
    + Longer content that cannot flex +
    +
    +@endcomponent + +### Don't shrink + +Use `.flex-no-shrink` to prevent a flex item from shrinking: + +@component('_partials.code-sample') +
    +
    + Item that can shrink if needed +
    +
    + Item that cannot shrink below it's initial size +
    +
    + Item that can shrink if needed +
    +
    +@endcomponent diff --git a/docs/source/styles/flexbox/justify-content.blade.md b/docs/source/styles/flexbox/justify-content.blade.md new file mode 100644 index 000000000..6481b758e --- /dev/null +++ b/docs/source/styles/flexbox/justify-content.blade.md @@ -0,0 +1,76 @@ +--- +extends: _layouts.markdown +title: "Flexbox" +--- + +
    Flexbox
    + +# Justify Content + +
    + Usage + Responsive + Customizing +
    + +Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS. + +## Flex start + +Use `.justify-start` to justify items against the start of the flex container's main axis *(this is also the default behavior)*: + +@component('_partials.code-sample') +
    +
    1
    +
    2
    +
    3
    +
    +@endcomponent + +## Flex end + +Use `.justify-end` to justify items against the end of the flex container's main axis: + +@component('_partials.code-sample') +
    +
    1
    +
    2
    +
    3
    +
    +@endcomponent + +## Center + +Use `.justify-center` to justify items along the center of the flex container's main axis: + +@component('_partials.code-sample') +
    +
    1
    +
    2
    +
    3
    +
    +@endcomponent + +## Space between + +Use `.justify-between` to justify items along the flex container's main axis such that there is an equal amount of space between each item: + +@component('_partials.code-sample') +
    +
    1
    +
    2
    +
    3
    +
    +@endcomponent + +## Space around + +Use `.justify-around` to justify items along the flex container's main axis such that there is an equal amount of space around each item: + +@component('_partials.code-sample') +
    +
    1
    +
    2
    +
    3
    +
    +@endcomponent diff --git a/docs/source/styles/flexbox/wrapping.blade.md b/docs/source/styles/flexbox/wrapping.blade.md new file mode 100644 index 000000000..91f663ca7 --- /dev/null +++ b/docs/source/styles/flexbox/wrapping.blade.md @@ -0,0 +1,68 @@ +--- +extends: _layouts.markdown +title: "Flexbox" +--- + +# Flex Wrapping + +
    + Usage + Responsive + Customizing +
    + +Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS. + +### No wrapping + +Use `.flex-nowrap` to prevent flex items from wrapping *(this is also the default behavior)*: + +@component('_partials.code-sample') +
    +
    +
    1
    +
    +
    +
    2
    +
    +
    +
    3
    +
    +
    +@endcomponent + +### Wrap normally + +Use `.flex-wrap` to allow flex items to wrap: + +@component('_partials.code-sample') +
    +
    +
    1
    +
    +
    +
    2
    +
    +
    +
    3
    +
    +
    +@endcomponent + +### Wrap reversed + +Use `.flex-wrap-reverse` to wrap flex items in the reverse direction: + +@component('_partials.code-sample') +
    +
    +
    1
    +
    +
    +
    2
    +
    +
    +
    3
    +
    +
    +@endcomponent diff --git a/docs/tailwind.js b/docs/tailwind.js index 218b3a472..1a1153874 100644 --- a/docs/tailwind.js +++ b/docs/tailwind.js @@ -80,7 +80,7 @@ module.exports = { }, text: { fonts: { - 'sans': 'museo-sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue', + 'sans': 'Proxima Nova, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue', 'serif': 'Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif', 'mono': 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', }, @@ -96,7 +96,7 @@ module.exports = { '4xl': '2.875rem', // 46px }, weights: { - 'normal': 300, + 'normal': 400, 'semibold': 500, 'bold': 700, }, From 720e051f1981263c2777da3ed6a82dbc15f2e5b0 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Tue, 24 Oct 2017 07:11:33 -0400 Subject: [PATCH 04/13] Styling links and normalizing headers --- docs/source/_layouts/master.blade.php | 132 +++++++++--------- .../styles/flexbox/align-content.blade.md | 12 +- .../styles/flexbox/align-items.blade.md | 12 +- .../source/styles/flexbox/align-self.blade.md | 10 +- .../source/styles/flexbox/containers.blade.md | 6 +- docs/source/styles/flexbox/direction.blade.md | 10 +- .../styles/flexbox/flex-grow-shrink.blade.md | 2 + docs/source/styles/flexbox/wrapping.blade.md | 8 +- docs/tailwind.js | 2 +- 9 files changed, 104 insertions(+), 90 deletions(-) diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php index b751d06bd..a145b4e79 100644 --- a/docs/source/_layouts/master.blade.php +++ b/docs/source/_layouts/master.blade.php @@ -43,27 +43,27 @@
    @endcomponent -### End +## End Use `.content-end` to pack lines in a flex container against the end of the main axis: @@ -85,7 +87,7 @@ Use `.content-end` to pack lines in a flex container against the end of the main
    @endcomponent -### Space between +## Space between Use `.content-between` to distribute lines in a flex container such that there is an equal amount of space between each line: @@ -109,7 +111,7 @@ Use `.content-between` to distribute lines in a flex container such that there i @endcomponent -### Space around +## Space around Use `.content-around` to distribute lines in a flex container such that there is an equal amount of space around each line: diff --git a/docs/source/styles/flexbox/align-items.blade.md b/docs/source/styles/flexbox/align-items.blade.md index bd55cd3c9..0d378d60b 100644 --- a/docs/source/styles/flexbox/align-items.blade.md +++ b/docs/source/styles/flexbox/align-items.blade.md @@ -3,6 +3,8 @@ extends: _layouts.markdown title: "Flexbox" --- +
    Flexbox
    + # Align Items
    @@ -13,7 +15,7 @@ title: "Flexbox" Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS. -### Stretch +## Stretch Use `.items-stretch` to stretch items to fill the flex container's cross axis *(this is also the default behavior)*: @@ -25,7 +27,7 @@ Use `.items-stretch` to stretch items to fill the flex container's cross axis *(
    @endcomponent -### Start +## Start Use `.items-start` to align items to the start of the flex container's cross axis: @@ -37,7 +39,7 @@ Use `.items-start` to align items to the start of the flex container's cross axi @endcomponent -### End +## End Use `.items-end` to align items to the end of the flex container's cross axis: @@ -49,7 +51,7 @@ Use `.items-end` to align items to the end of the flex container's cross axis: @endcomponent -### Center +## Center Use `.items-center` to align items along the center of the flex container's cross axis: @@ -61,7 +63,7 @@ Use `.items-center` to align items along the center of the flex container's cros @endcomponent -### Baseline +## Baseline Use `.items-baseline` to align items along the flex container's cross axis such that all of their baselines align: diff --git a/docs/source/styles/flexbox/align-self.blade.md b/docs/source/styles/flexbox/align-self.blade.md index 5b13d63f0..326d310c4 100644 --- a/docs/source/styles/flexbox/align-self.blade.md +++ b/docs/source/styles/flexbox/align-self.blade.md @@ -3,6 +3,8 @@ extends: _layouts.markdown title: "Flexbox" --- +
    Flexbox
    + # Align Self
    @@ -13,7 +15,7 @@ title: "Flexbox" Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS. -### Start +## Start Use `.self-start` to align an item to the start of the flex container's cross axis, despite the container's `align-items` value: @@ -25,7 +27,7 @@ Use `.self-start` to align an item to the start of the flex container's cross ax
    @endcomponent -### End +## End Use `.self-end` to align an item to the end of the flex container's cross axis, despite the container's `align-items` value: @@ -37,7 +39,7 @@ Use `.self-end` to align an item to the end of the flex container's cross axis, @endcomponent -### Center +## Center Use `.self-center` to align an item along the center of the flex container's cross axis, despite the container's `align-items` value: @@ -49,7 +51,7 @@ Use `.self-center` to align an item along the center of the flex container's cro @endcomponent -### Stretch +## Stretch Use `.self-stretch` to stretch an item to fill the flex container's cross axis, despite the container's `align-items` value: diff --git a/docs/source/styles/flexbox/containers.blade.md b/docs/source/styles/flexbox/containers.blade.md index aac188fb6..81952f866 100644 --- a/docs/source/styles/flexbox/containers.blade.md +++ b/docs/source/styles/flexbox/containers.blade.md @@ -3,6 +3,8 @@ extends: _layouts.markdown title: "Flex Containers" --- +
    Flexbox
    + # Flex Containers
    @@ -13,7 +15,7 @@ title: "Flex Containers" Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS. -### Flex +## Flex Use `.flex` to create a block-level flex container: @@ -25,7 +27,7 @@ Use `.flex` to create a block-level flex container:
    @endcomponent -### Inline flex +## Inline flex Use `.inline-flex` to create an inline flex container: diff --git a/docs/source/styles/flexbox/direction.blade.md b/docs/source/styles/flexbox/direction.blade.md index fcb648eb1..97c3c4593 100644 --- a/docs/source/styles/flexbox/direction.blade.md +++ b/docs/source/styles/flexbox/direction.blade.md @@ -3,6 +3,8 @@ extends: _layouts.markdown title: "Flexbox" --- +
    Flexbox
    + # Flex Direction
    @@ -13,7 +15,7 @@ title: "Flexbox" Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS. -### Row +## Row Use `.flex-row` to position flex items horizontally in the same direction as text *(this is also the default behavior)*: @@ -25,7 +27,7 @@ Use `.flex-row` to position flex items horizontally in the same direction as tex
    @endcomponent -### Row reversed +## Row reversed Use `.flex-row-reverse` to position flex items horizontally in the opposite direction: @@ -37,7 +39,7 @@ Use `.flex-row-reverse` to position flex items horizontally in the opposite dire @endcomponent -### Column +## Column Use `.flex-col` to position flex items vertically: @@ -49,7 +51,7 @@ Use `.flex-col` to position flex items vertically: @endcomponent -### Column reversed +## Column reversed Use `.flex-col-reverse` to position flex items vertically in the opposite direction: diff --git a/docs/source/styles/flexbox/flex-grow-shrink.blade.md b/docs/source/styles/flexbox/flex-grow-shrink.blade.md index 836784045..7bae61980 100644 --- a/docs/source/styles/flexbox/flex-grow-shrink.blade.md +++ b/docs/source/styles/flexbox/flex-grow-shrink.blade.md @@ -3,6 +3,8 @@ extends: _layouts.markdown title: "Flexbox" --- +
    Flexbox
    + # Flex, Grow, & Shrink
    diff --git a/docs/source/styles/flexbox/wrapping.blade.md b/docs/source/styles/flexbox/wrapping.blade.md index 91f663ca7..39c174da8 100644 --- a/docs/source/styles/flexbox/wrapping.blade.md +++ b/docs/source/styles/flexbox/wrapping.blade.md @@ -3,6 +3,8 @@ extends: _layouts.markdown title: "Flexbox" --- +
    Flexbox
    + # Flex Wrapping
    @@ -13,7 +15,7 @@ title: "Flexbox" Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS. -### No wrapping +## No wrapping Use `.flex-nowrap` to prevent flex items from wrapping *(this is also the default behavior)*: @@ -31,7 +33,7 @@ Use `.flex-nowrap` to prevent flex items from wrapping *(this is also the defaul
    @endcomponent -### Wrap normally +## Wrap normally Use `.flex-wrap` to allow flex items to wrap: @@ -49,7 +51,7 @@ Use `.flex-wrap` to allow flex items to wrap:
    @endcomponent -### Wrap reversed +## Wrap reversed Use `.flex-wrap-reverse` to wrap flex items in the reverse direction: diff --git a/docs/tailwind.js b/docs/tailwind.js index 1a1153874..40b46f7df 100644 --- a/docs/tailwind.js +++ b/docs/tailwind.js @@ -80,7 +80,7 @@ module.exports = { }, text: { fonts: { - 'sans': 'Proxima Nova, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue', + 'sans': 'Proxima Nova, proxima-nova, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue', 'serif': 'Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif', 'mono': 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', }, From 7bcb9da86bbe39d81baf6f0345c9a6f86fb4b3b1 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Tue, 24 Oct 2017 07:44:34 -0400 Subject: [PATCH 05/13] Update nowrap to no-wrap --- docs/source/styles/flexbox/wrapping.blade.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/source/styles/flexbox/wrapping.blade.md b/docs/source/styles/flexbox/wrapping.blade.md index 39c174da8..72a66a703 100644 --- a/docs/source/styles/flexbox/wrapping.blade.md +++ b/docs/source/styles/flexbox/wrapping.blade.md @@ -17,10 +17,10 @@ Tailwind provides a comprehensive set of Flexbox utilities out of the box to mak ## No wrapping -Use `.flex-nowrap` to prevent flex items from wrapping *(this is also the default behavior)*: +Use `.flex-no-wrap` to prevent flex items from wrapping *(this is also the default behavior)*: @component('_partials.code-sample') -
    +
    1
    From 063f12ce58ac93448d1279dbc5c7161eff683b60 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Tue, 24 Oct 2017 07:47:17 -0400 Subject: [PATCH 06/13] Add self-auto utility Allows resetting align-self back to the default value if necessary at different breakpoints. --- __tests__/fixtures/tailwind.css | 20 ++++++++++++++++++++ src/generators/flex.js | 3 +++ 2 files changed, 23 insertions(+) diff --git a/__tests__/fixtures/tailwind.css b/__tests__/fixtures/tailwind.css index 928a2335e..137af02a8 100644 --- a/__tests__/fixtures/tailwind.css +++ b/__tests__/fixtures/tailwind.css @@ -3120,6 +3120,10 @@ button, align-items: stretch; } +.self-auto { + align-self: auto; +} + .self-start { align-self: flex-start; } @@ -5870,6 +5874,10 @@ button, align-items: stretch; } + .sm\:self-auto { + align-self: auto; + } + .sm\:self-start { align-self: flex-start; } @@ -8621,6 +8629,10 @@ button, align-items: stretch; } + .md\:self-auto { + align-self: auto; + } + .md\:self-start { align-self: flex-start; } @@ -11372,6 +11384,10 @@ button, align-items: stretch; } + .lg\:self-auto { + align-self: auto; + } + .lg\:self-start { align-self: flex-start; } @@ -14123,6 +14139,10 @@ button, align-items: stretch; } + .xl\:self-auto { + align-self: auto; + } + .xl\:self-start { align-self: flex-start; } diff --git a/src/generators/flex.js b/src/generators/flex.js index 46148af72..9f67b7352 100644 --- a/src/generators/flex.js +++ b/src/generators/flex.js @@ -44,6 +44,9 @@ export default function() { 'items-stretch': { 'align-items': 'stretch', }, + 'self-auto': { + 'align-self': 'auto', + }, 'self-start': { 'align-self': 'flex-start', }, From 0a5a05f1cd229e6fd2781ec3808ba75bef715151 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Tue, 24 Oct 2017 07:50:38 -0400 Subject: [PATCH 07/13] Remove self-baseline utility Has no browser support and I can't even really understand how it would work. Closes #198. --- __tests__/fixtures/tailwind.css | 20 -------------------- src/generators/flex.js | 3 --- 2 files changed, 23 deletions(-) diff --git a/__tests__/fixtures/tailwind.css b/__tests__/fixtures/tailwind.css index 137af02a8..be1ed842d 100644 --- a/__tests__/fixtures/tailwind.css +++ b/__tests__/fixtures/tailwind.css @@ -3136,10 +3136,6 @@ button, align-self: center; } -.self-baseline { - align-self: baseline; -} - .self-stretch { align-self: stretch; } @@ -5890,10 +5886,6 @@ button, align-self: center; } - .sm\:self-baseline { - align-self: baseline; - } - .sm\:self-stretch { align-self: stretch; } @@ -8645,10 +8637,6 @@ button, align-self: center; } - .md\:self-baseline { - align-self: baseline; - } - .md\:self-stretch { align-self: stretch; } @@ -11400,10 +11388,6 @@ button, align-self: center; } - .lg\:self-baseline { - align-self: baseline; - } - .lg\:self-stretch { align-self: stretch; } @@ -14155,10 +14139,6 @@ button, align-self: center; } - .xl\:self-baseline { - align-self: baseline; - } - .xl\:self-stretch { align-self: stretch; } diff --git a/src/generators/flex.js b/src/generators/flex.js index 9f67b7352..6837f72ee 100644 --- a/src/generators/flex.js +++ b/src/generators/flex.js @@ -56,9 +56,6 @@ export default function() { 'self-center': { 'align-self': 'center', }, - 'self-baseline': { - 'align-self': 'baseline', - }, 'self-stretch': { 'align-self': 'stretch', }, From 45adfa32fc37ec3ecc2aca70055b8b3cd7152d9a Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Tue, 24 Oct 2017 07:52:20 -0400 Subject: [PATCH 08/13] Remove content-stretch utility No browser support, doesn't make sense, gtfo. Closes #199. --- __tests__/fixtures/tailwind.css | 20 -------------------- src/generators/flex.js | 3 --- 2 files changed, 23 deletions(-) diff --git a/__tests__/fixtures/tailwind.css b/__tests__/fixtures/tailwind.css index be1ed842d..590afd92c 100644 --- a/__tests__/fixtures/tailwind.css +++ b/__tests__/fixtures/tailwind.css @@ -3180,10 +3180,6 @@ button, align-content: space-around; } -.content-stretch { - align-content: stretch; -} - .flex-1 { flex: 1; } @@ -5930,10 +5926,6 @@ button, align-content: space-around; } - .sm\:content-stretch { - align-content: stretch; - } - .sm\:flex-1 { flex: 1; } @@ -8681,10 +8673,6 @@ button, align-content: space-around; } - .md\:content-stretch { - align-content: stretch; - } - .md\:flex-1 { flex: 1; } @@ -11432,10 +11420,6 @@ button, align-content: space-around; } - .lg\:content-stretch { - align-content: stretch; - } - .lg\:flex-1 { flex: 1; } @@ -14183,10 +14167,6 @@ button, align-content: space-around; } - .xl\:content-stretch { - align-content: stretch; - } - .xl\:flex-1 { flex: 1; } diff --git a/src/generators/flex.js b/src/generators/flex.js index 6837f72ee..7ee91262a 100644 --- a/src/generators/flex.js +++ b/src/generators/flex.js @@ -89,9 +89,6 @@ export default function() { 'content-around': { 'align-content': 'space-around', }, - 'content-stretch': { - 'align-content': 'stretch', - }, 'flex-1': { 'flex': '1' }, From e821ea266785d31c796c361ebeb5180b69f1e145 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Tue, 24 Oct 2017 08:51:29 -0400 Subject: [PATCH 09/13] Working on flex docs --- docs/source/_layouts/master.blade.php | 4 +-- .../{containers.blade.md => display.blade.md} | 4 +-- .../styles/flexbox/flex-grow-shrink.blade.md | 26 ++++++------------- 3 files changed, 12 insertions(+), 22 deletions(-) rename docs/source/styles/flexbox/{containers.blade.md => display.blade.md} (96%) diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php index a145b4e79..b8587835b 100644 --- a/docs/source/_layouts/master.blade.php +++ b/docs/source/_layouts/master.blade.php @@ -95,9 +95,9 @@
  • Container
  • Display
  • - Flexbox + Flexbox
      -
    • Containers
      • +
    • Display
    • Direction
    • Wrapping
    • Justify Content
      • diff --git a/docs/source/styles/flexbox/containers.blade.md b/docs/source/styles/flexbox/display.blade.md similarity index 96% rename from docs/source/styles/flexbox/containers.blade.md rename to docs/source/styles/flexbox/display.blade.md index 81952f866..327a58376 100644 --- a/docs/source/styles/flexbox/containers.blade.md +++ b/docs/source/styles/flexbox/display.blade.md @@ -1,11 +1,11 @@ --- extends: _layouts.markdown -title: "Flex Containers" +title: "Display – Flexbox" ---
      Flexbox
      -# Flex Containers +# Display
      Usage diff --git a/docs/source/styles/flexbox/flex-grow-shrink.blade.md b/docs/source/styles/flexbox/flex-grow-shrink.blade.md index 7bae61980..d144b2c5e 100644 --- a/docs/source/styles/flexbox/flex-grow-shrink.blade.md +++ b/docs/source/styles/flexbox/flex-grow-shrink.blade.md @@ -15,9 +15,7 @@ title: "Flexbox" Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS. -## Flex - -### 1 +## Flex 1 Use `.flex-1` to allow a flex item to grow and shrink as needed, ignoring it's initial size: @@ -62,7 +60,7 @@ Use `.flex-1` to allow a flex item to grow and shrink as needed, ignoring it's i @endslot @endcomponent -### Auto +## Auto Use `.flex-auto` to allow a flex item to grow and shrink, taking into account it's initial size: @@ -107,7 +105,7 @@ Use `.flex-auto` to allow a flex item to grow and shrink, taking into account it @endslot @endcomponent -### None +## None Use `.flex-none` to prevent a flex item from growing or shrinking: @@ -125,7 +123,7 @@ Use `.flex-none` to prevent a flex item from growing or shrinking:
      @endcomponent -### Initial +## Initial Use `.flex-initial` to allow a flex item to shrink but not grow, taking into account it's initial size *(this is also the default behavior)*: @@ -177,11 +175,7 @@ Use `.flex-initial` to allow a flex item to shrink but not grow, taking into acc @endslot @endcomponent ---- - -## Flex Grow - -### Grow +## Grow Use `.flex-grow` to allow a flex item to grow to fill any available space: @@ -199,7 +193,7 @@ Use `.flex-grow` to allow a flex item to grow to fill any available space:
    • @endcomponent -### Don't grow +## Don't grow Use `.flex-no-grow` to prevent a flex item from growing: @@ -217,11 +211,7 @@ Use `.flex-no-grow` to prevent a flex item from growing:
    @endcomponent ---- - -## Flex shrink - -### Shrink +## Shrink Use `.flex-shrink` to allow a flex item to shrink if needed: @@ -239,7 +229,7 @@ Use `.flex-shrink` to allow a flex item to shrink if needed: @endcomponent -### Don't shrink +## Don't shrink Use `.flex-no-shrink` to prevent a flex item from shrinking: From ab601d42f72234bd81aeeaf960e003126ff98564 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Tue, 24 Oct 2017 09:19:39 -0400 Subject: [PATCH 10/13] Use position fixed for sidebar to restore keyboard scrolling functionality --- docs/source/_layouts/master.blade.php | 8 ++++---- docs/tailwind.js | 3 ++- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php index b8587835b..61d8fcbb7 100644 --- a/docs/source/_layouts/master.blade.php +++ b/docs/source/_layouts/master.blade.php @@ -1,5 +1,5 @@ - + @@ -13,8 +13,8 @@ -
    -
    +
    +
    Tailwind CSS @@ -170,7 +170,7 @@
    -
    +
    @yield('body')
    diff --git a/docs/tailwind.js b/docs/tailwind.js index 40b46f7df..33cd52f45 100644 --- a/docs/tailwind.js +++ b/docs/tailwind.js @@ -241,7 +241,8 @@ module.exports = { '8': '2rem', '10': '2.5rem', '12': '3rem', - '16': '4rem' + '16': '4rem', + '80': '20rem', }, negativeMargin: { 'px': '1px', From b6e3b37bca58895a2a934062107dc541447335c5 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Tue, 24 Oct 2017 09:43:41 -0400 Subject: [PATCH 11/13] Add "default" badges to default utility values --- .../styles/flexbox/align-content.blade.md | 4 +- .../styles/flexbox/align-items.blade.md | 29 ++--- .../source/styles/flexbox/align-self.blade.md | 36 ++++-- docs/source/styles/flexbox/direction.blade.md | 4 +- .../styles/flexbox/flex-grow-shrink.blade.md | 104 +++++++++--------- .../styles/flexbox/justify-content.blade.md | 29 ++--- docs/source/styles/flexbox/wrapping.blade.md | 10 +- docs/tailwind.js | 2 +- 8 files changed, 116 insertions(+), 102 deletions(-) diff --git a/docs/source/styles/flexbox/align-content.blade.md b/docs/source/styles/flexbox/align-content.blade.md index b922bca78..3f9ce072d 100644 --- a/docs/source/styles/flexbox/align-content.blade.md +++ b/docs/source/styles/flexbox/align-content.blade.md @@ -15,9 +15,9 @@ title: "Flexbox" Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS. -## Start +

    Start Default

    -Use `.content-start` to pack lines in a flex container against the start of the main axis *(this is also the default behavior)*: +Use `.content-start` to pack lines in a flex container against the start of the main axis: @component('_partials.code-sample')
    diff --git a/docs/source/styles/flexbox/align-items.blade.md b/docs/source/styles/flexbox/align-items.blade.md index 0d378d60b..f535345a4 100644 --- a/docs/source/styles/flexbox/align-items.blade.md +++ b/docs/source/styles/flexbox/align-items.blade.md @@ -15,9 +15,9 @@ title: "Flexbox" Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS. -## Stretch +

    Stretch Default

    -Use `.items-stretch` to stretch items to fill the flex container's cross axis *(this is also the default behavior)*: +Use `.items-stretch` to stretch items to fill the flex container's cross axis: @component('_partials.code-sample')
    @@ -39,18 +39,6 @@ Use `.items-start` to align items to the start of the flex container's cross axi
    @endcomponent -## End - -Use `.items-end` to align items to the end of the flex container's cross axis: - -@component('_partials.code-sample') -
    -
    1
    -
    2
    -
    3
    -
    -@endcomponent - ## Center Use `.items-center` to align items along the center of the flex container's cross axis: @@ -63,6 +51,19 @@ Use `.items-center` to align items along the center of the flex container's cros
    @endcomponent +## End + +Use `.items-end` to align items to the end of the flex container's cross axis: + +@component('_partials.code-sample') +
    +
    1
    +
    2
    +
    3
    +
    +@endcomponent + + ## Baseline Use `.items-baseline` to align items along the flex container's cross axis such that all of their baselines align: diff --git a/docs/source/styles/flexbox/align-self.blade.md b/docs/source/styles/flexbox/align-self.blade.md index 326d310c4..a38db64ec 100644 --- a/docs/source/styles/flexbox/align-self.blade.md +++ b/docs/source/styles/flexbox/align-self.blade.md @@ -15,6 +15,18 @@ title: "Flexbox" Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS. +

    Auto Default

    + +Use `.self-auto` to align an item based on the flex container's `align-items` value: + +@component('_partials.code-sample') +
    +
    1
    +
    2
    +
    3
    +
    +@endcomponent + ## Start Use `.self-start` to align an item to the start of the flex container's cross axis, despite the container's `align-items` value: @@ -27,18 +39,6 @@ Use `.self-start` to align an item to the start of the flex container's cross ax
    @endcomponent -## End - -Use `.self-end` to align an item to the end of the flex container's cross axis, despite the container's `align-items` value: - -@component('_partials.code-sample') -
    -
    1
    -
    2
    -
    3
    -
    -@endcomponent - ## Center Use `.self-center` to align an item along the center of the flex container's cross axis, despite the container's `align-items` value: @@ -51,6 +51,18 @@ Use `.self-center` to align an item along the center of the flex container's cro
    @endcomponent +## End + +Use `.self-end` to align an item to the end of the flex container's cross axis, despite the container's `align-items` value: + +@component('_partials.code-sample') +
    +
    1
    +
    2
    +
    3
    +
    +@endcomponent + ## Stretch Use `.self-stretch` to stretch an item to fill the flex container's cross axis, despite the container's `align-items` value: diff --git a/docs/source/styles/flexbox/direction.blade.md b/docs/source/styles/flexbox/direction.blade.md index 97c3c4593..121869bca 100644 --- a/docs/source/styles/flexbox/direction.blade.md +++ b/docs/source/styles/flexbox/direction.blade.md @@ -15,9 +15,9 @@ title: "Flexbox" Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS. -## Row +

    Row Default

    -Use `.flex-row` to position flex items horizontally in the same direction as text *(this is also the default behavior)*: +Use `.flex-row` to position flex items horizontally in the same direction as text: @component('_partials.code-sample')
    diff --git a/docs/source/styles/flexbox/flex-grow-shrink.blade.md b/docs/source/styles/flexbox/flex-grow-shrink.blade.md index d144b2c5e..4407ad10a 100644 --- a/docs/source/styles/flexbox/flex-grow-shrink.blade.md +++ b/docs/source/styles/flexbox/flex-grow-shrink.blade.md @@ -15,6 +15,58 @@ title: "Flexbox" Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS. +

    Initial Default

    + +Use `.flex-initial` to allow a flex item to shrink but not grow, taking into account it's initial size: + +@component('_partials.code-sample') +

    Items don't grow when there's extra space

    +
    +
    + Short +
    +
    + Medium length +
    +
    + +

    Items shrink if possible when needed

    +
    +
    + Short +
    +
    + Medium length +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem +
    +
    + +@slot('code') +
    +
    + Short +
    +
    + Medium length +
    +
    + +
    +
    + Short +
    +
    + Medium length +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem +
    +
    +@endslot +@endcomponent + ## Flex 1 Use `.flex-1` to allow a flex item to grow and shrink as needed, ignoring it's initial size: @@ -123,58 +175,6 @@ Use `.flex-none` to prevent a flex item from growing or shrinking:
    @endcomponent -## Initial - -Use `.flex-initial` to allow a flex item to shrink but not grow, taking into account it's initial size *(this is also the default behavior)*: - -@component('_partials.code-sample') -

    Items don't grow when there's extra space

    -
    -
    - Short -
    -
    - Medium length -
    -
    - -

    Items shrink if possible when needed

    -
    -
    - Short -
    -
    - Medium length -
    -
    - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem -
    -
    - -@slot('code') -
    -
    - Short -
    -
    - Medium length -
    -
    - -
    -
    - Short -
    -
    - Medium length -
    -
    - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem -
    -
    -@endslot -@endcomponent - ## Grow Use `.flex-grow` to allow a flex item to grow to fill any available space: diff --git a/docs/source/styles/flexbox/justify-content.blade.md b/docs/source/styles/flexbox/justify-content.blade.md index 6481b758e..4e1df21e6 100644 --- a/docs/source/styles/flexbox/justify-content.blade.md +++ b/docs/source/styles/flexbox/justify-content.blade.md @@ -15,9 +15,9 @@ title: "Flexbox" Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS. -## Flex start +

    Start Default

    -Use `.justify-start` to justify items against the start of the flex container's main axis *(this is also the default behavior)*: +Use `.justify-start` to justify items against the start of the flex container's main axis: @component('_partials.code-sample')
    @@ -27,18 +27,6 @@ Use `.justify-start` to justify items against the start of the flex container's
    @endcomponent -## Flex end - -Use `.justify-end` to justify items against the end of the flex container's main axis: - -@component('_partials.code-sample') -
    -
    1
    -
    2
    -
    3
    -
    -@endcomponent - ## Center Use `.justify-center` to justify items along the center of the flex container's main axis: @@ -51,6 +39,19 @@ Use `.justify-center` to justify items along the center of the flex container's
    @endcomponent +## End + +Use `.justify-end` to justify items against the end of the flex container's main axis: + +@component('_partials.code-sample') +
    +
    1
    +
    2
    +
    3
    +
    +@endcomponent + + ## Space between Use `.justify-between` to justify items along the flex container's main axis such that there is an equal amount of space between each item: diff --git a/docs/source/styles/flexbox/wrapping.blade.md b/docs/source/styles/flexbox/wrapping.blade.md index 72a66a703..62f31811c 100644 --- a/docs/source/styles/flexbox/wrapping.blade.md +++ b/docs/source/styles/flexbox/wrapping.blade.md @@ -15,19 +15,19 @@ title: "Flexbox" Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS. -## No wrapping +

    Don't wrap Default

    -Use `.flex-no-wrap` to prevent flex items from wrapping *(this is also the default behavior)*: +Use `.flex-no-wrap` to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary: @component('_partials.code-sample')
    -
    +
    1
    -
    +
    2
    -
    +
    3
    diff --git a/docs/tailwind.js b/docs/tailwind.js index 33cd52f45..4a2681f78 100644 --- a/docs/tailwind.js +++ b/docs/tailwind.js @@ -109,7 +109,7 @@ module.exports = { tracking: { 'tight': '-0.05em', 'normal': '0', - 'wide': '0.1em', + 'wide': '0.05em', }, colors: { ...colors From 17638c3d483724393dc71cae35443252a56585c1 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Tue, 24 Oct 2017 09:50:50 -0400 Subject: [PATCH 12/13] Clean up navigation Remove ambiguity about active states by using full page paths, fix any broken active states, etc. --- docs/source/_layouts/master.blade.php | 98 +++++++++++++-------------- 1 file changed, 49 insertions(+), 49 deletions(-) diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php index 61d8fcbb7..9bc588c9f 100644 --- a/docs/source/_layouts/master.blade.php +++ b/docs/source/_layouts/master.blade.php @@ -35,35 +35,35 @@

    Introduction

    Getting Started

    Examples

    From 66d76353b4b4e350f06a5832f5b2c562960a8422 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Tue, 24 Oct 2017 11:57:38 -0400 Subject: [PATCH 13/13] Make shit white --- docs/source/_assets/less/markdown.less | 3 ++- docs/source/_layouts/master.blade.php | 2 +- docs/source/_partials/code-sample.blade.php | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/source/_assets/less/markdown.less b/docs/source/_assets/less/markdown.less index c30625d7e..825e704bc 100644 --- a/docs/source/_assets/less/markdown.less +++ b/docs/source/_assets/less/markdown.less @@ -4,7 +4,8 @@ @apply .mt-6; @apply .mb-6; @apply .pb-2; - @apply .border-b; + @apply .border-b-2; + @apply .border-smoke; .subnav-link, .subnav-link& { @apply .mr-6; diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php index 9bc588c9f..a24790ebb 100644 --- a/docs/source/_layouts/master.blade.php +++ b/docs/source/_layouts/master.blade.php @@ -1,5 +1,5 @@ - + diff --git a/docs/source/_partials/code-sample.blade.php b/docs/source/_partials/code-sample.blade.php index 7c6366339..ab1787ec6 100644 --- a/docs/source/_partials/code-sample.blade.php +++ b/docs/source/_partials/code-sample.blade.php @@ -1,4 +1,4 @@ -
    +
    {{ $slot }}