{"id":13490955,"url":"https://github.com/displaykit/responsive_styles","last_synced_at":"2025-10-23T05:39:11.876Z","repository":{"id":59749078,"uuid":"538803624","full_name":"displaykit/responsive_styles","owner":"displaykit","description":"📐 It's a set of common utility strategies to work with responsive styles with Flutter and CSS in JS","archived":false,"fork":false,"pushed_at":"2022-11-27T22:00:15.000Z","size":456,"stargazers_count":62,"open_issues_count":1,"forks_count":2,"subscribers_count":0,"default_branch":"main","last_synced_at":"2024-04-26T20:32:57.631Z","etag":null,"topics":["desktop","flutter","mobile","responsive","styles","stylesheet","web"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/displaykit.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-09-20T04:07:19.000Z","updated_at":"2024-03-19T20:45:09.000Z","dependencies_parsed_at":"2023-01-22T12:45:56.005Z","dependency_job_id":null,"html_url":"https://github.com/displaykit/responsive_styles","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/displaykit%2Fresponsive_styles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/displaykit%2Fresponsive_styles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/displaykit%2Fresponsive_styles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/displaykit%2Fresponsive_styles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/displaykit","download_url":"https://codeload.github.com/displaykit/responsive_styles/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245989167,"owners_count":20705774,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["desktop","flutter","mobile","responsive","styles","stylesheet","web"],"created_at":"2024-07-31T19:00:52.362Z","updated_at":"2025-10-23T05:39:06.824Z","avatar_url":"https://github.com/displaykit.png","language":"Dart","readme":"# @displaykit/responsive_styles:\n\n\u003e You don't need to be worried just because you have to support multiple screens 📺 🖥 💻 📱.\n\n[\u003cimg width=\"150px\" src=\"https://www.datocms-assets.com/31049/1618983297-powered-by-vercel.svg\" /\u003e](https://vercel.com/?utm_source=displaykit\u0026utm_campaign=oss)\n[![licence mit](https://img.shields.io/badge/licence-MIT-blueviolet.svg)](LICENSE) ![Downloads](https://img.shields.io/npm/dw/@displaykit/responsive_styles?color=orange) ![Current Version](https://img.shields.io/npm/v/@displaykit/responsive_styles?color=success\u0026label=version\u0026cache=1) [![Flutter Package](https://img.shields.io/badge/responsive__styles-fluttter-blue)](https://pub.dev/packages/responsive_styles) [![NPM Package](https://img.shields.io/badge/@displaykit/responsive__styles-npm-red)](https://www.npmjs.com/package/@displaykit/responsive_styles)\n\nIt's a set of common utility strategies to work with responsive styles with CSS in JS and Flutter\n\n## Summary\n- [Dart/Flutter](#dartflutter-)\n- [JavaScript/React](#javascriptreact-)\n- [Docs](#docs)\n\n---\n\n## Dart/Flutter 🐦\n\n### How to install?\n\n```sh\nflutter pub add responsive_styles\n```\n\n### Get started\n\n- [Check this file to see a small example project](./example/with_flutter_sample/lib/flutter_basic/flutter_basic.dart)\n- [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)\n\n### Demo\n\n- [Check it out live!](https://displaykit-flutter-demo.vercel.app/#/holy-grail-layout)\n\n![CleanShot 2022-07-27 at 16 27 30](https://user-images.githubusercontent.com/13791385/181355905-6729a384-29a9-40b9-ac8d-caada1ded825.gif)\n\n```dart\nbody: Container(\n  color: context.responsive.value({\n    Breakpoints.xs: Colors.red.shade200,\n    Breakpoints.sm: Colors.yellow.shade200,\n    Breakpoints.md: Colors.green.shade200,\n    Breakpoints.lg: Colors.blue.shade200,\n    Breakpoints.xl: Colors.purple.shade200,\n  }),\n)\n```\n\n\u003e [Learn more looking at the code example with a small implementation](./example/with_flutter_sample/lib/flutter_basic/flutter_basic.dart#L43)\n\u003e\n\u003e [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)\n\n#### Other demos\n\n- [Basic demo](https://displaykit-flutter-demo.vercel.app/#/)\n  - [Code](./example/with_flutter_sample/lib/flutter_basic/flutter_basic.dart)\n- [Holy grail layout](https://displaykit-flutter-demo.vercel.app/#/holy-grail-layout)\n  - [Code](./example/with_flutter_sample/lib/holy_grail_layout/holy_grail_layout.dart)\n- [Chat App](https://displaykit-flutter-demo.vercel.app/#/chat-app)\n  - [Code](./example/with_flutter_sample/lib/chat_app_screen/chat_app_screen.dart)\n\n---\n\n## JavaScript/React ⚛\n\n### How to install?\n\n```sh\nyarn add @displaykit/responsive_styles\n```\n\n### Get started\n\n- [Check this project to see a small example project](./example/with_react_sample)\n- [Go direct to usage in this line](./example/with_react_sample/pages/index.tsx#L9)\n\n### Demo\n\n- [Check it out live!](https://displaykit-flutter-demo.vercel.app/)\n\n---\n\n## Docs\n\n### What are the default values for the breakpoints?\n\n- `xs: 0` From 0 screen width until 479\n- `sm: 480` From 480 screen width until 767\n- `md: 768` From 768 screen width until 991\n- `lg: 992` From 992 screen width until 1199\n- `xl: 1200` From 1200 and beyond\n\n\u003e All values from here came from other libraries and responsive Front End frameworks.\n\n### Can I customize the breakpoint base values?\n\nActually yes! Just follow [this tutorial](https://github.com/displaykit/responsive_styles/blob/main/package/lib/breakpoints/breakpoints.md#how-to-customize-the-default-breakpoints)\n\n### Resources and features\n\n\n| Feature.                                                             | Dart/Flutter | JavaScript/React |\n| ---                                                                  | ---          | ---              |\n| [Responsive](./package/lib/responsive/responsive.md)                 | ✅           | ❌               |\n| [breakpoints](./package/lib/breakpoints/breakpoints.md)              | ✅           | ✅               |\n| [GridItem](./package/lib/grid-item/grid_item.md)                     | ✅           | 🚧               |\n| [BreakpointsBaseValues](./package/lib/breakpoints/breakpoints.md)    | ✅           | 🚧               |\n\n\u003e ✅ Ready, 🚧 WIP, ❌ Not in roadmap by now, 🗺️ Inside roadmap\n\n## Other project stuff\n\n### Contributing\n\nWant to contribute to the project? [Check our guide with how and our code guidelines](./CONTRIBUTING.md)\n\n### How to report a bug?\n\nPlease just open an issue with a link do a small reproduction of the bug and let's discuss it\n\n### License\n\n[MIT License](./LICENSE) © [Mario Souto](https://mariosouto.com/)\n","funding_links":[],"categories":["Dart"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdisplaykit%2Fresponsive_styles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdisplaykit%2Fresponsive_styles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdisplaykit%2Fresponsive_styles/lists"}