https://github.com/displaykit/responsive_styles
📐 It's a set of common utility strategies to work with responsive styles with Flutter and CSS in JS
https://github.com/displaykit/responsive_styles
desktop flutter mobile responsive styles stylesheet web
Last synced: 7 months ago
JSON representation
📐 It's a set of common utility strategies to work with responsive styles with Flutter and CSS in JS
- Host: GitHub
- URL: https://github.com/displaykit/responsive_styles
- Owner: displaykit
- License: mit
- Created: 2022-09-20T04:07:19.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-11-27T22:00:15.000Z (almost 3 years ago)
- Last Synced: 2024-04-26T20:32:57.631Z (over 1 year ago)
- Topics: desktop, flutter, mobile, responsive, styles, stylesheet, web
- Language: Dart
- Homepage:
- Size: 445 KB
- Stars: 62
- Watchers: 0
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# @displaykit/responsive_styles:
> You don't need to be worried just because you have to support multiple screens 📺 🖥 💻 📱.
[
](https://vercel.com/?utm_source=displaykit&utm_campaign=oss)
[](LICENSE)   [](https://pub.dev/packages/responsive_styles) [](https://www.npmjs.com/package/@displaykit/responsive_styles)
It's a set of common utility strategies to work with responsive styles with CSS in JS and Flutter
## Summary
- [Dart/Flutter](#dartflutter-)
- [JavaScript/React](#javascriptreact-)
- [Docs](#docs)
---
## Dart/Flutter 🐦
### How to install?
```sh
flutter pub add responsive_styles
```
### Get started
- [Check this file to see a small example project](./example/with_flutter_sample/lib/flutter_basic/flutter_basic.dart)
- [Go direct to usage in this line](https://github.com/displaykit/responsive_styles/blob/main/example/with_flutter_sample/lib/flutter_basic/flutter_basic.dart#L43)
### Demo
- [Check it out live!](https://displaykit-flutter-demo.vercel.app/#/holy-grail-layout)
```dart
body: Container(
color: context.responsive.value({
Breakpoints.xs: Colors.red.shade200,
Breakpoints.sm: Colors.yellow.shade200,
Breakpoints.md: Colors.green.shade200,
Breakpoints.lg: Colors.blue.shade200,
Breakpoints.xl: Colors.purple.shade200,
}),
)
```
> [Learn more looking at the code example with a small implementation](./example/with_flutter_sample/lib/flutter_basic/flutter_basic.dart#L43)
>
> [Or this one of the gif with the Web "Holy Grail Layout"](./example/with_flutter_sample/lib/holy_grail_layout/holy_grail_layout.dart#L26)
#### Other demos
- [Basic demo](https://displaykit-flutter-demo.vercel.app/#/)
- [Code](./example/with_flutter_sample/lib/flutter_basic/flutter_basic.dart)
- [Holy grail layout](https://displaykit-flutter-demo.vercel.app/#/holy-grail-layout)
- [Code](./example/with_flutter_sample/lib/holy_grail_layout/holy_grail_layout.dart)
- [Chat App](https://displaykit-flutter-demo.vercel.app/#/chat-app)
- [Code](./example/with_flutter_sample/lib/chat_app_screen/chat_app_screen.dart)
---
## JavaScript/React ⚛
### How to install?
```sh
yarn add @displaykit/responsive_styles
```
### Get started
- [Check this project to see a small example project](./example/with_react_sample)
- [Go direct to usage in this line](./example/with_react_sample/pages/index.tsx#L9)
### Demo
- [Check it out live!](https://displaykit-flutter-demo.vercel.app/)
---
## Docs
### What are the default values for the breakpoints?
- `xs: 0` From 0 screen width until 479
- `sm: 480` From 480 screen width until 767
- `md: 768` From 768 screen width until 991
- `lg: 992` From 992 screen width until 1199
- `xl: 1200` From 1200 and beyond
> All values from here came from other libraries and responsive Front End frameworks.
### Can I customize the breakpoint base values?
Actually yes! Just follow [this tutorial](https://github.com/displaykit/responsive_styles/blob/main/package/lib/breakpoints/breakpoints.md#how-to-customize-the-default-breakpoints)
### Resources and features
| Feature. | Dart/Flutter | JavaScript/React |
| --- | --- | --- |
| [Responsive](./package/lib/responsive/responsive.md) | ✅ | ❌ |
| [breakpoints](./package/lib/breakpoints/breakpoints.md) | ✅ | ✅ |
| [GridItem](./package/lib/grid-item/grid_item.md) | ✅ | 🚧 |
| [BreakpointsBaseValues](./package/lib/breakpoints/breakpoints.md) | ✅ | 🚧 |
> ✅ Ready, 🚧 WIP, ❌ Not in roadmap by now, 🗺️ Inside roadmap
## Other project stuff
### Contributing
Want to contribute to the project? [Check our guide with how and our code guidelines](./CONTRIBUTING.md)
### How to report a bug?
Please just open an issue with a link do a small reproduction of the bug and let's discuss it
### License
[MIT License](./LICENSE) © [Mario Souto](https://mariosouto.com/)