mirror of
https://github.com/bitwarden/browser
synced 2025-12-19 01:33:33 +00:00
7d0ecb1dfa
* add tailwind breakpoints * add docs page * update docs * rename docs file * update config * remove custom breakpoints * update stories
32 lines
955 B
Plaintext
32 lines
955 B
Plaintext
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"
|
|
/>
|