From 0c424c1b81a20cd9c25ef88d119de118a01727ea Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sat, 28 Oct 2017 08:45:28 -0400 Subject: [PATCH] Finish positioning docs --- docs/source/styles/positioning.blade.md | 109 ++++++++++++++++++------ 1 file changed, 85 insertions(+), 24 deletions(-) diff --git a/docs/source/styles/positioning.blade.md b/docs/source/styles/positioning.blade.md index fb44b78f9..a81e2be93 100644 --- a/docs/source/styles/positioning.blade.md +++ b/docs/source/styles/positioning.blade.md @@ -72,14 +72,30 @@ Use `.absolute` to position an element *outside* of the normal flow of the docum Offsets are calculated relative to the nearest parent that has a position other than `static`, and the element *will* act as a position reference for other absolutely positioned children. @component('_partials.code-sample') -
-

Relative parent

-
+ +

With static positioning

+
+

Relative parent

+

Static parent

-
+
+

Static child

+
+
+

Static sibling

+
+
+
+ +

With absolute positioning

+
+

Relative parent

+
+

Static parent

+

Absolute child

-
+

Static sibling

@@ -190,34 +206,61 @@ Combined with Tailwind's [padding utilities](#), you'll probably find that these @component('_partials.code-sample')
-
-
+
+

.pin-x.pin-t

+
+
+
-
-
+
+

.pin-y.pin-r

+
+
+
-
-
+
+

.pin-x.pin-b

+
+
+
-
-
+
+

.pin-y.pin-l

+
+
+
-
-
+
+

.pin

+
+
+
-
-
+
+

.pin-l.pin-t

+
+
+
-
-
+
+

.pin-t.pin-r

+
+
+
-
-
+
+

.pin-r.pin-b

+
+
+
-
-
+
+

.pin-b.pin-l

+
+
+
@@ -272,26 +315,44 @@ Combined with Tailwind's [padding utilities](#), you'll probably find that these ## Responsive -To apply an overflow utility only at a specific breakpoint, add a `{breakpoint}:` prefix to the existing class name. For example, adding the class `md:overflow-scroll` to an element would apply the `overflow-scroll` utility at medium screen sizes and above. +To position an element only at a specific breakpoint, add a `{breakpoint}:` prefix to any existing positioning utility. For example, adding the class `md:absolute` to an element would apply the `absolute` utility at medium screen sizes and above, and adding `lg:pin-y` would apply `pin-y` at large screens and above. For more information about Tailwind's responsive design features, check out the [Responsive Design](/workflow/responsive-design) documentation. @component('_partials.responsive-code-sample') @slot('none') +
+
Responsive element
+
@endslot @slot('sm') +
+
Responsive element
+
@endslot @slot('md') +
+
Responsive element
+
@endslot @slot('lg') +
+
Responsive element
+
@endslot @slot('xl') +
+
Responsive element
+
@endslot @slot('code') +
+
+
@endslot @endcomponent