From 233ac03b1d32f0923dab7c159f18b2fda2e75b74 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 23 Oct 2017 11:00:45 -0400 Subject: [PATCH] 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 -