[CL-103] add docs for Tailwind breakpoints (#6021)

* add tailwind breakpoints

* add docs page

* update docs

* rename docs file

* update config

* remove custom breakpoints

* update stories
This commit is contained in:
Will Martin 2023-08-15 18:23:42 -04:00 committed by GitHub
parent 2a56885863
commit 7d0ecb1dfa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 31 additions and 0 deletions

View File

@ -0,0 +1,31 @@
import { Meta } from "@storybook/addon-docs";
<Meta title="Documentation/Responsive Design" />
# Responsive Design
Bitwarden supports the following breakpoints:
| Breakpoint prefix | Minimum width |
| ----------------- | ------------- |
| `sm` | 640px |
| `md` | 768px |
| `lg` | 1024px |
| `xl` | 1280px |
| `2xl` | 1536px |
These can be used to conditionally apply other Tailwind classes at specific screen sizes. Find more
info in the [Tailwind docs](https://tailwindcss.com/docs/responsive-design).
## Example
```html
<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<img class="tw-w-16 md:tw-w-32 lg:tw-w-48" src="..." />
```
<img
class="tw-w-16 md:tw-w-32 lg:tw-w-48"
alt="Bitwarden logo"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/Bitwarden_logo.svg/512px-Bitwarden_logo.svg.png"
/>