[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:
parent
2a56885863
commit
7d0ecb1dfa
|
@ -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"
|
||||
/>
|
Loading…
Reference in New Issue