From 987c54c8b0319d6ab1c50f7fb06e610322b45df2 Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Thu, 9 Nov 2017 13:01:04 -0500 Subject: [PATCH 1/5] Remove old flexbox docs page --- docs/source/docs/flexbox.blade.md | 697 ------------------------------ 1 file changed, 697 deletions(-) delete mode 100644 docs/source/docs/flexbox.blade.md diff --git a/docs/source/docs/flexbox.blade.md b/docs/source/docs/flexbox.blade.md deleted file mode 100644 index 17344a90a..000000000 --- a/docs/source/docs/flexbox.blade.md +++ /dev/null @@ -1,697 +0,0 @@ ---- -extends: _layouts.documentation -title: "Flexbox" -description: null ---- - -
- 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. - -## Display - -### 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 - ---- - -## Flex Direction - -### 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 - ---- - -## Flex Wrapping - -### 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 - ---- - -## 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)*: - -@component('_partials.code-sample') -
-
1
-
2
-
3
-
-@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 - -### 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 - ---- - -## Align Items - -### 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 - ---- - -## 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)*: - -@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 - ---- - -## Flex - -### 1 - -Use `.flex-1` to allow a flex item to grow and shrink as needed, ignoring its 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 its 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 its 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 its initial size -
-
- Item that can shrink if needed -
-
-@endcomponent - ---- - -## 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: - -@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 From 296bdbde132089fd20be32745816a9582a7ac7ad Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Thu, 9 Nov 2017 13:05:14 -0500 Subject: [PATCH 2/5] Remove unnecessary Jigsaw bin file --- docs/tasks/bin.js | 18 ------------------ 1 file changed, 18 deletions(-) delete mode 100644 docs/tasks/bin.js diff --git a/docs/tasks/bin.js b/docs/tasks/bin.js deleted file mode 100644 index e6b1d4ca7..000000000 --- a/docs/tasks/bin.js +++ /dev/null @@ -1,18 +0,0 @@ -var hasbin = require('hasbin'); -var fs = require('fs'); - -module.exports = { - path: function() { - if (fs.existsSync('./vendor/bin/jigsaw')) { - return '"./vendor/bin/jigsaw"' - } - - if (hasbin.sync('jigsaw')) { - return 'jigsaw'; - } - - console.log('Could not find Jigsaw; please install it via Composer, either locally or globally.'); - - process.exit(); - } -}; From 40715a76eccd323a8e512eeda13b43671d8bab91 Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Thu, 9 Nov 2017 13:20:00 -0500 Subject: [PATCH 3/5] Remove old "Working Utility-First" placeholder page --- docs/source/docs/working-utility-first.blade.md | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 docs/source/docs/working-utility-first.blade.md diff --git a/docs/source/docs/working-utility-first.blade.md b/docs/source/docs/working-utility-first.blade.md deleted file mode 100644 index 28b2c84ae..000000000 --- a/docs/source/docs/working-utility-first.blade.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -extends: _layouts.documentation -title: "Working Utility-First" -description: null ---- From 56b062bece5770b981d501e7e56b9adb34743a8e Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Thu, 9 Nov 2017 13:55:51 -0500 Subject: [PATCH 4/5] Convert to 2-space indentation --- docs/source/_assets/js/app.js | 14 +- docs/source/_assets/js/nav.js | 1 - docs/source/_assets/less/prism.less | 103 ++-- docs/source/_layouts/documentation.blade.php | 159 +++--- docs/source/_layouts/master.blade.php | 84 ++-- .../_partials/customized-config.blade.php | 35 +- .../source/_partials/feature-badges.blade.php | 124 ++--- .../responsive-code-sample.blade.php | 14 +- ....md => work-in-progress-example.blade.php} | 0 .../source/docs/adding-new-utilities.blade.md | 3 - docs/source/docs/background-color.blade.md | 36 +- docs/source/docs/background-position.blade.md | 112 ++--- docs/source/docs/background-size.blade.md | 52 +- docs/source/docs/border-color.blade.md | 39 +- docs/source/docs/border-radius.blade.md | 158 +++--- docs/source/docs/border-style.blade.md | 52 +- docs/source/docs/border-width.blade.md | 40 +- docs/source/docs/colors.blade.md | 6 +- docs/source/docs/configuration.blade.md | 2 +- docs/source/docs/container.blade.md | 79 ++- docs/source/docs/cursor.blade.md | 62 +-- docs/source/docs/display.blade.md | 112 ++--- docs/source/docs/examples/alerts.blade.md | 4 +- docs/source/docs/examples/buttons.blade.md | 35 +- docs/source/docs/examples/cards.blade.md | 60 +-- docs/source/docs/examples/forms.blade.md | 237 +++++---- docs/source/docs/examples/navigation.blade.md | 148 +++--- .../docs/extracting-components.blade.md | 4 - .../docs/flexbox-align-content.blade.md | 385 ++++++++------- docs/source/docs/flexbox-align-items.blade.md | 145 +++--- docs/source/docs/flexbox-align-self.blade.md | 138 +++--- docs/source/docs/flexbox-direction.blade.md | 118 ++--- docs/source/docs/flexbox-display.blade.md | 86 ++-- .../docs/flexbox-flex-grow-shrink.blade.md | 462 +++++++++--------- .../docs/flexbox-justify-content.blade.md | 145 +++--- docs/source/docs/flexbox-wrapping.blade.md | 198 ++++---- docs/source/docs/floats.blade.md | 74 +-- docs/source/docs/font-weight.blade.md | 112 ++--- docs/source/docs/fonts.blade.md | 62 +-- docs/source/docs/forms.blade.md | 58 +-- .../docs/functions-and-directives.blade.md | 1 - docs/source/docs/grid.blade.md | 382 +++++++-------- docs/source/docs/height.blade.md | 202 ++++---- docs/source/docs/installation.blade.md | 34 +- docs/source/docs/letter-spacing.blade.md | 52 +- docs/source/docs/line-height.blade.md | 62 +-- docs/source/docs/lists.blade.md | 50 +- docs/source/docs/max-height.blade.md | 54 +- docs/source/docs/max-width.blade.md | 11 +- docs/source/docs/min-height.blade.md | 64 ++- docs/source/docs/min-width.blade.md | 53 +- docs/source/docs/opacity.blade.md | 88 ++-- docs/source/docs/overflow.blade.md | 149 +++--- docs/source/docs/pointer-events.blade.md | 52 +- docs/source/docs/positioning.blade.md | 194 ++++---- docs/source/docs/resize.blade.md | 62 +-- docs/source/docs/responsive-design.blade.md | 13 +- docs/source/docs/shadows.blade.md | 94 ++-- docs/source/docs/spacing.blade.md | 56 +-- docs/source/docs/svg.blade.md | 2 +- docs/source/docs/text-alignment.blade.md | 72 +-- docs/source/docs/text-color.blade.md | 38 +- docs/source/docs/text-sizing.blade.md | 122 ++--- docs/source/docs/text-style.blade.md | 156 +++--- docs/source/docs/user-select.blade.md | 52 +- docs/source/docs/vertical-alignment.blade.md | 10 +- docs/source/docs/visibility.blade.md | 64 ++- docs/source/docs/what-is-tailwind.blade.md | 90 ++-- .../docs/whitespace-and-wrapping.blade.md | 122 ++--- docs/source/docs/width.blade.md | 312 ++++++------ docs/source/docs/z-index.blade.md | 174 +++---- docs/source/index.blade.php | 132 ++--- 72 files changed, 3364 insertions(+), 3413 deletions(-) rename docs/source/_partials/{work-in-progress-example.blade.md => work-in-progress-example.blade.php} (100%) diff --git a/docs/source/_assets/js/app.js b/docs/source/_assets/js/app.js index 18383d100..7fa375b53 100644 --- a/docs/source/_assets/js/app.js +++ b/docs/source/_assets/js/app.js @@ -7,16 +7,16 @@ window.Vue = require('vue') Vue.component('responsive-code-sample', require('./components/ResponsiveCodeSample.vue')) const app = new Vue({ - el: '#app' + el: '#app' }) Prism.highlightAll() -anchors.options = { placement: 'left', class: 'text-slate-light' }; -anchors.add(); +anchors.options = { placement: 'left', class: 'text-slate-light' } +anchors.add() // Add shortcut to search input when pressing the "/" key document.onkeyup = function (e) { - if (e.which == 191) { - document.getElementById('docsearch').focus(); - } -}; + if (e.which == 191) { + document.getElementById('docsearch').focus() + } +} diff --git a/docs/source/_assets/js/nav.js b/docs/source/_assets/js/nav.js index 8357befe6..4eb26411a 100644 --- a/docs/source/_assets/js/nav.js +++ b/docs/source/_assets/js/nav.js @@ -53,7 +53,6 @@ $.when($.ready).then(function() { // Load page history (for back/forward nav) window.onpopstate = function(e) { if(e.state){ - // Update the page $('title').text(e.state.title) $('#nav').html(e.state.nav) diff --git a/docs/source/_assets/less/prism.less b/docs/source/_assets/less/prism.less index 6598e9804..a19790703 100644 --- a/docs/source/_assets/less/prism.less +++ b/docs/source/_assets/less/prism.less @@ -7,82 +7,82 @@ code[class*="language-"], pre[class*="language-"] { - @apply .font-mono; - @apply .text-slate-dark; + @apply .font-mono; + @apply .text-slate-dark; - background: none; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - line-height: 1.5; + background: none; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; - font-weight: 400; + font-weight: 400; } pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { - text-shadow: none; - background: #b3d4fc; + text-shadow: none; + background: #b3d4fc; } pre[class*="language-"]::selection, pre[class*="language-"] ::selection, code[class*="language-"]::selection, code[class*="language-"] ::selection { - text-shadow: none; - background: #b3d4fc; + text-shadow: none; + background: #b3d4fc; } @media print { - code[class*="language-"], - pre[class*="language-"] { - text-shadow: none; - } + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } } /* Code blocks */ pre { - padding: 1em; - margin: .5em 0; - overflow: auto; + padding: 1em; + margin: .5em 0; + overflow: auto; } :not(pre) > code[class*="language-"], pre[class*="language-"] { - background: transparent; - @apply .text-sm; + background: transparent; + @apply .text-sm; } /* Inline code */ :not(pre) > code[class*="language-"] { - padding: .1em; - border-radius: .3em; - white-space: normal; + padding: .1em; + border-radius: .3em; + white-space: normal; } .token.comment, .token.prolog, .token.doctype, .token.cdata { - @apply .text-grey; + @apply .text-grey; } .token.punctuation { - @apply .text-blue-dark; - // color: #999; + @apply .text-blue-dark; + // color: #999; } .namespace { - opacity: .7; + opacity: .7; } .token.property, @@ -91,19 +91,19 @@ pre[class*="language-"] { .token.number, .token.constant, .token.symbol { - @apply .text-blue-dark; + @apply .text-blue-dark; } code.language-diff, pre.language-diff { - @apply .text-grey-darker; + @apply .text-grey-darker; } .token.deleted { - @apply .text-grey; + @apply .text-grey; } .token.inserted { - @apply .text-blue-dark; + @apply .text-blue-dark; } // .token.selector, @@ -112,7 +112,7 @@ code.language-diff, pre.language-diff { // .token.builtin, // .token.inserted, .token.string { - @apply .text-purple; + @apply .text-purple; } .token.operator, @@ -120,36 +120,35 @@ code.language-diff, pre.language-diff { .token.url, .language-css .token.string, .style .token.string { - color: #a67f59; - background: hsla(0, 0%, 100%, .5); + color: #a67f59; + background: hsla(0, 0%, 100%, .5); } .token.atrule, .token.attr-value, .token.keyword { - @apply .text-purple; - // color: #07a; + @apply .text-purple; + // color: #07a; } .token.function { - color: #DD4A68; + color: #DD4A68; } .token.regex, .token.important, .token.variable { - color: #e90; + color: #e90; } .token.important, .token.bold { - font-weight: bold; + font-weight: bold; } .token.italic { - font-style: italic; + font-style: italic; } .token.entity { - cursor: help; + cursor: help; } - diff --git a/docs/source/_layouts/documentation.blade.php b/docs/source/_layouts/documentation.blade.php index 320df52ae..a8f5877a8 100644 --- a/docs/source/_layouts/documentation.blade.php +++ b/docs/source/_layouts/documentation.blade.php @@ -11,92 +11,89 @@ @section('body')
-