From 21c93fa73a49796628522a6328122a488718652a Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Tue, 31 Oct 2017 16:18:54 -0400 Subject: [PATCH 1/2] Add remaining WIP banners --- docs/source/_layouts/documentation.blade.php | 9 +-- .../_partials/work-in-progress.blade.php | 2 +- docs/source/docs/cursor.blade.md | 15 +++-- docs/source/docs/examples/alerts.blade.md | 26 +++---- docs/source/docs/examples/buttons.blade.md | 34 ++++------ docs/source/docs/examples/cards.blade.md | 14 +++- docs/source/docs/font-weight.blade.md | 2 + docs/source/docs/fonts.blade.md | 2 + docs/source/docs/letter-spacing.blade.md | 2 + docs/source/docs/line-height.blade.md | 2 + docs/source/docs/lists.blade.md | 15 +++-- docs/source/docs/margin.blade.md | 66 ------------------ docs/source/docs/padding.blade.md | 67 ------------------- docs/source/docs/pointer-events.blade.md | 15 +++-- docs/source/docs/resize.blade.md | 15 +++-- ...ative-margin.blade.md => spacing.blade.md} | 43 ++++-------- docs/source/docs/svg.blade.md | 15 +++-- docs/source/docs/text-color.blade.md | 2 + docs/source/docs/text-sizing.blade.md | 2 + docs/source/docs/text-style.blade.md | 2 + docs/source/docs/user-select.blade.md | 15 +++-- docs/source/docs/vertical-alignment.blade.md | 34 +--------- .../docs/whitespace-and-wrapping.blade.md | 2 + 23 files changed, 134 insertions(+), 267 deletions(-) delete mode 100644 docs/source/docs/margin.blade.md delete mode 100644 docs/source/docs/padding.blade.md rename docs/source/docs/{negative-margin.blade.md => spacing.blade.md} (72%) diff --git a/docs/source/_layouts/documentation.blade.php b/docs/source/_layouts/documentation.blade.php index 99f93fae5..26bb82c55 100644 --- a/docs/source/_layouts/documentation.blade.php +++ b/docs/source/_layouts/documentation.blade.php @@ -124,14 +124,7 @@
  • Max-Height
    • -
  • - Spacing - -
    • +
  • Spacing
  • SVG
  • Typography diff --git a/docs/source/_partials/work-in-progress.blade.php b/docs/source/_partials/work-in-progress.blade.php index c51275e8b..e55472202 100644 --- a/docs/source/_partials/work-in-progress.blade.php +++ b/docs/source/_partials/work-in-progress.blade.php @@ -5,7 +5,7 @@

    Work in progress!

    -

    More detailed documentation is coming soon, but in the mean time here's a quick class reference.

    +

    More detailed documentation is coming soon, but in the mean time here's a quick reference.

    diff --git a/docs/source/docs/cursor.blade.md b/docs/source/docs/cursor.blade.md index a753ef631..388e6a007 100644 --- a/docs/source/docs/cursor.blade.md +++ b/docs/source/docs/cursor.blade.md @@ -5,8 +5,15 @@ title: "Cursor" # Cursor -
    - Usage - Responsive - Customizing +
    + Utilities for controlling the cursor style when hovering over an element.
    + +@include('_partials.feature-badges', [ + 'responsive' => true, + 'customizable' => false, + 'hover' => false, + 'focus' => false +]) + +@include('_partials.work-in-progress') diff --git a/docs/source/docs/examples/alerts.blade.md b/docs/source/docs/examples/alerts.blade.md index fda2f7c80..ca83b2c39 100644 --- a/docs/source/docs/examples/alerts.blade.md +++ b/docs/source/docs/examples/alerts.blade.md @@ -5,9 +5,19 @@ title: "Alerts" # Alerts -We don't ship alert components because every app has it's own visual style and they are so easy to build out of utilities. - -Here's a bunch of examples: +
    +
    +
    +
    + +
    +
    +

    Work in progress!

    +

    More detailed documentation is coming soon, but in the mean time here's a bunch of quick examples.

    +
    +
    +
    +
    ### Traditional @@ -20,8 +30,6 @@ Here's a bunch of examples:
    @endcomponent ---- - ### Left Accent Border @component('_partials.code-sample', ['lang' => 'html']) @@ -31,8 +39,6 @@ Here's a bunch of examples: @endcomponent ---- - ### Titled @component('_partials.code-sample', ['lang' => 'html']) @@ -46,8 +52,6 @@ Here's a bunch of examples: @endcomponent ---- - ### Solid @component('_partials.code-sample', ['lang' => 'html']) @@ -59,8 +63,6 @@ Here's a bunch of examples: @endcomponent ---- - ### Top Accent Border @component('_partials.code-sample', ['lang' => 'html']) @@ -75,8 +77,6 @@ Here's a bunch of examples: @endcomponent ---- - ### Banner @component('_partials.code-sample', ['lang' => 'html']) diff --git a/docs/source/docs/examples/buttons.blade.md b/docs/source/docs/examples/buttons.blade.md index 02483538d..d25fa3d55 100644 --- a/docs/source/docs/examples/buttons.blade.md +++ b/docs/source/docs/examples/buttons.blade.md @@ -5,11 +5,19 @@ title: "Buttons" # Buttons -We don't ship any default button components because every app has it's own visual style and Tailwind tries to be as unopinionated as possible about how your project should look. - -That said, buttons are easy to build by combining utility classes. - -Here's a bunch of examples: +
    +
    +
    +
    + +
    +
    +

    Work in progress!

    +

    More detailed documentation is coming soon, but in the mean time here's a bunch of quick examples.

    +
    +
    +
    +
    ### Simple @@ -43,8 +51,6 @@ Here's a bunch of examples: @endslot @endcomponent ---- - ### Pill @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center']) @@ -53,8 +59,6 @@ Here's a bunch of examples: @endcomponent ---- - ### Outline @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center']) @@ -63,8 +67,6 @@ Here's a bunch of examples: @endcomponent ---- - ### Bordered @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center']) @@ -73,8 +75,6 @@ Here's a bunch of examples: @endcomponent ---- - ### Disabled @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center']) @@ -83,8 +83,6 @@ Here's a bunch of examples: @endcomponent ---- - ### 3D @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center']) @@ -93,8 +91,6 @@ Here's a bunch of examples: @endcomponent ---- - ### Elevated @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center']) @@ -103,8 +99,6 @@ Here's a bunch of examples: @endcomponent ---- - ### Button Groups @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center']) @@ -118,8 +112,6 @@ Here's a bunch of examples: @endcomponent ---- - ### w/Icon @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center']) diff --git a/docs/source/docs/examples/cards.blade.md b/docs/source/docs/examples/cards.blade.md index 3de0bb2a7..685a174e7 100644 --- a/docs/source/docs/examples/cards.blade.md +++ b/docs/source/docs/examples/cards.blade.md @@ -5,7 +5,19 @@ title: "Cards" # Cards -We don't ship alert components because every app has it's own visual style, but they are easy af to make. +
    +
    +
    +
    + +
    +
    +

    Work in progress!

    +

    More detailed examples are coming soon.

    +
    +
    +
    +
    ## Classic card example diff --git a/docs/source/docs/font-weight.blade.md b/docs/source/docs/font-weight.blade.md index 1475cf185..5465de0d1 100644 --- a/docs/source/docs/font-weight.blade.md +++ b/docs/source/docs/font-weight.blade.md @@ -16,6 +16,8 @@ title: "Font Weight" 'focus' => false ]) +@include('_partials.work-in-progress') +
    diff --git a/docs/source/docs/fonts.blade.md b/docs/source/docs/fonts.blade.md index 1a711f946..d1a930d30 100644 --- a/docs/source/docs/fonts.blade.md +++ b/docs/source/docs/fonts.blade.md @@ -16,6 +16,8 @@ title: "Font Families" 'focus' => false ]) +@include('_partials.work-in-progress') +
    diff --git a/docs/source/docs/letter-spacing.blade.md b/docs/source/docs/letter-spacing.blade.md index 31a6bf6e3..6d0e83106 100644 --- a/docs/source/docs/letter-spacing.blade.md +++ b/docs/source/docs/letter-spacing.blade.md @@ -16,6 +16,8 @@ title: "Letter Spacing" 'focus' => false ]) +@include('_partials.work-in-progress') +
    diff --git a/docs/source/docs/line-height.blade.md b/docs/source/docs/line-height.blade.md index 4e8db2e39..5ee00342d 100644 --- a/docs/source/docs/line-height.blade.md +++ b/docs/source/docs/line-height.blade.md @@ -16,6 +16,8 @@ title: "Line Height" 'focus' => false ]) +@include('_partials.work-in-progress') +
    diff --git a/docs/source/docs/lists.blade.md b/docs/source/docs/lists.blade.md index 471e78b69..60a6c7e95 100644 --- a/docs/source/docs/lists.blade.md +++ b/docs/source/docs/lists.blade.md @@ -5,12 +5,15 @@ title: "Lists" # Lists -
    - Usage - Responsive - Customizing +
    + Utilities for controlling list styles.
    -Include documentation around: +@include('_partials.feature-badges', [ + 'responsive' => true, + 'customizable' => false, + 'hover' => false, + 'focus' => false +]) -- `list-reset` helper +@include('_partials.work-in-progress') diff --git a/docs/source/docs/margin.blade.md b/docs/source/docs/margin.blade.md deleted file mode 100644 index 55f6b5559..000000000 --- a/docs/source/docs/margin.blade.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -extends: _layouts.documentation -title: "Margin" ---- - -# Margin - -
    - Usage - Responsive - Customizing -
    - -

    Using

    - -The syntax below is combined to create a system for padding and margins. For example, `.pt-2` would add padding to the top of the element to the value of `0.5rem` and `.mx-0` would make the horizontal margin zero. - -
    -
    -
    Class
    -
    p Padding
    -
    m Margin
    -
    pull Negative Margin
    -
    -
    -
    Position (optional)
    -
    t Top
    -
    r Right
    -
    b Bottom
    -
    l Left
    -
    x Horizontal
    -
    y Vertical
    -
    -
    -
    Space
    -
    0 0
    -
    1 0.25rem
    -
    2 0.5rem
    -
    3 0.75rem
    -
    4 1rem
    -
    6 1.5rem
    -
    8 2rem
    -
    -
    - -

    Customizing the spacing scale

    - -You can customize the margin and padding utilities using the `@sizing-scale` variable. Please note that the entire scale must be redefined. It's not possible to add a new value to the existing scale. - -```css -// Scale customization here -``` - -

    Responsive spacing utilities

    - -The spacing utilities can also be used with [responsive](/docs/responsive-design) prefixes: - -```html -
    -
    -
    -``` - -```css -// Responsive example here -``` diff --git a/docs/source/docs/padding.blade.md b/docs/source/docs/padding.blade.md deleted file mode 100644 index afdaf205e..000000000 --- a/docs/source/docs/padding.blade.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -extends: _layouts.documentation -title: "Padding" ---- - -# Padding - -
    - Usage - Responsive - Customizing -
    - -

    Using

    - -The syntax below is combined to create a system for padding and margins. For example, `.pt-2` would add padding to the top of the element to the value of `0.5rem` and `.mx-0` would make the horizontal margin zero. - -
    -
    -
    Class
    -
    p Padding
    -
    m Margin
    -
    pull Negative Margin
    -
    -
    -
    Position (optional)
    -
    t Top
    -
    r Right
    -
    b Bottom
    -
    l Left
    -
    x Horizontal
    -
    y Vertical
    -
    -
    -
    Space
    -
    0 0
    -
    1 0.25rem
    -
    2 0.5rem
    -
    3 0.75rem
    -
    4 1rem
    -
    6 1.5rem
    -
    8 2rem
    -
    -
    - -

    Customizing the spacing scale

    - -You can customize the margin and padding utilities using the `@sizing-scale` variable. Please note that the entire scale must be redefined. It's not possible to add a new value to the existing scale. - - -```css -// Scale customization here -``` - -

    Responsive spacing utilities

    - -The spacing utilities can also be used with [responsive](/docs/responsive-design) prefixes: - -```html -
    -
    -
    -``` - -```css -// Responsive example here -``` diff --git a/docs/source/docs/pointer-events.blade.md b/docs/source/docs/pointer-events.blade.md index 8c3a91f1f..0610cbaf6 100644 --- a/docs/source/docs/pointer-events.blade.md +++ b/docs/source/docs/pointer-events.blade.md @@ -5,8 +5,15 @@ title: "Pointer Events" # Pointer Events -
    - Usage - Responsive - Customizing +
    + Utilities for controlling whether an element responds to pointer events.
    + +@include('_partials.feature-badges', [ + 'responsive' => true, + 'customizable' => false, + 'hover' => false, + 'focus' => false +]) + +@include('_partials.work-in-progress') diff --git a/docs/source/docs/resize.blade.md b/docs/source/docs/resize.blade.md index c2bf32f69..64aba5c37 100644 --- a/docs/source/docs/resize.blade.md +++ b/docs/source/docs/resize.blade.md @@ -5,8 +5,15 @@ title: "Resize" # Resize -
    - Usage - Responsive - Customizing +
    + Utilities for controlling the how an element can be resized.
    + +@include('_partials.feature-badges', [ + 'responsive' => true, + 'customizable' => false, + 'hover' => false, + 'focus' => false +]) + +@include('_partials.work-in-progress') diff --git a/docs/source/docs/negative-margin.blade.md b/docs/source/docs/spacing.blade.md similarity index 72% rename from docs/source/docs/negative-margin.blade.md rename to docs/source/docs/spacing.blade.md index 1f7d9caf9..19e4b975c 100644 --- a/docs/source/docs/negative-margin.blade.md +++ b/docs/source/docs/spacing.blade.md @@ -1,26 +1,31 @@ --- extends: _layouts.documentation -title: "Negative Margin" +title: "Padding" --- -# Negative Margin +# Spacing -
    - Usage - Responsive - Customizing +
    + Utilities for controlling an element's padding and margin.
    -

    Using

    +@include('_partials.feature-badges', [ + 'responsive' => true, + 'customizable' => true, + 'hover' => false, + 'focus' => false +]) -The syntax below is combined to create a system for padding and margins. For example, `.pt-2` would add padding to the top of the element to the value of `0.5rem` and `.mx-0` would make the horizontal margin zero. +@include('_partials.work-in-progress') + +The syntax below is combined to create a system for padding and margins. For example, `.pt-2` would add padding to the top of the element to the value of `0.5rem`, `.mx-0` would make the horizontal margin zero, and `.-mb-6` would add negative margin to the bottom of an element.
    Class
    p Padding
    m Margin
    -
    pull Negative Margin
    +
    -m Negative Margin
    Position (optional)
    @@ -42,23 +47,3 @@ The syntax below is combined to create a system for padding and margins. For exa
    8 2rem
    - -

    Customizing the spacing scale

    - -```css -// Scale customization here -``` - -

    Responsive spacing utilities

    - -The spacing utilities can also be used with [responsive](/docs/responsive-design) prefixes: - -```html -
    -
    -
    -``` - -```css -// Responsive example here -``` diff --git a/docs/source/docs/svg.blade.md b/docs/source/docs/svg.blade.md index 120a176e5..d745c8af9 100644 --- a/docs/source/docs/svg.blade.md +++ b/docs/source/docs/svg.blade.md @@ -5,13 +5,14 @@ title: "SVG" # SVG -
    - Usage - Responsive - Customizing +
    + @include('_partials.work-in-progress')
    -Documentation around things like: +Tailwind doesn't provide SVG-specific utilites. Instead, use the generic sizing utilites to control an SVG's width and height, and the text color utilities to control an SVG's fill color. -- The `currentColor` trick in our base styles and using text color utilities to style SVG icons -- Using sizing helpers to style SVGs +@component('_partials.code-sample', ['class' => 'text-center']) + + + +@endcomponent diff --git a/docs/source/docs/text-color.blade.md b/docs/source/docs/text-color.blade.md index 30ce965ce..9e28cb458 100644 --- a/docs/source/docs/text-color.blade.md +++ b/docs/source/docs/text-color.blade.md @@ -16,6 +16,8 @@ title: "Text Color" 'focus' => false ]) +@include('_partials.work-in-progress') +
    diff --git a/docs/source/docs/text-sizing.blade.md b/docs/source/docs/text-sizing.blade.md index 9e6d116ca..82e41f922 100644 --- a/docs/source/docs/text-sizing.blade.md +++ b/docs/source/docs/text-sizing.blade.md @@ -16,6 +16,8 @@ title: "Text Sizing" 'focus' => false ]) +@include('_partials.work-in-progress') +
    diff --git a/docs/source/docs/text-style.blade.md b/docs/source/docs/text-style.blade.md index e2b27a7c9..5d5118a55 100644 --- a/docs/source/docs/text-style.blade.md +++ b/docs/source/docs/text-style.blade.md @@ -16,6 +16,8 @@ title: "Style & Decoration" 'focus' => false ]) +@include('_partials.work-in-progress') +
    diff --git a/docs/source/docs/user-select.blade.md b/docs/source/docs/user-select.blade.md index 5c8822d82..79af38321 100644 --- a/docs/source/docs/user-select.blade.md +++ b/docs/source/docs/user-select.blade.md @@ -5,8 +5,15 @@ title: "User Select" # User Select -
    - Usage - Responsive - Customizing +
    + Utilities for controlling whether the user can select text in an element.
    + +@include('_partials.feature-badges', [ + 'responsive' => true, + 'customizable' => false, + 'hover' => false, + 'focus' => false +]) + +@include('_partials.work-in-progress') diff --git a/docs/source/docs/vertical-alignment.blade.md b/docs/source/docs/vertical-alignment.blade.md index 871fb1315..61d9d6ca4 100644 --- a/docs/source/docs/vertical-alignment.blade.md +++ b/docs/source/docs/vertical-alignment.blade.md @@ -16,6 +16,8 @@ title: "Vertical Alignment" 'focus' => false ]) +@include('_partials.work-in-progress') +
    @@ -64,35 +66,3 @@ title: "Vertical Alignment"
    - -### Tables - -@component('_partials.code-sample') - - - - - -
    Baseline text - Top-aligned text - Middle-aligned text - Bottom-aligned text -
    -@endcomponent - - -### Inline-block Elements - -@component('_partials.code-sample') -
    - - - -
    -@endcomponent diff --git a/docs/source/docs/whitespace-and-wrapping.blade.md b/docs/source/docs/whitespace-and-wrapping.blade.md index 80a618d23..1d846aa75 100644 --- a/docs/source/docs/whitespace-and-wrapping.blade.md +++ b/docs/source/docs/whitespace-and-wrapping.blade.md @@ -16,6 +16,8 @@ title: "Whitespace & Wrapping" 'focus' => false ]) +@include('_partials.work-in-progress') +
    From a918ac7c2e22b85ea26c79d4d5ff9a0166bd5d67 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Tue, 31 Oct 2017 16:19:48 -0400 Subject: [PATCH 2/2] Bigger lead text --- docs/source/docs/what-is-tailwind.blade.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/source/docs/what-is-tailwind.blade.md b/docs/source/docs/what-is-tailwind.blade.md index 2c1ad4657..3950b40fd 100644 --- a/docs/source/docs/what-is-tailwind.blade.md +++ b/docs/source/docs/what-is-tailwind.blade.md @@ -5,9 +5,9 @@ title: "What is Tailwind?" # What is Tailwind? -
    +

    - Tailwind is a CSS framework for rapidly building custom user interfaces. + Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.