@displaykit/responsive_styles:

You don't need to be worried just because you have to support multiple screens 📺 🖥 💻 📱.

It's a set of common utility strategies to work with responsive styles with CSS in JS and Flutter

Summary

• Dart/Flutter
• JavaScript/React
• Docs

---

Dart/Flutter 🐦

How to install?

flutter pub add responsive_styles

Get started

• Check this file to see a small example project
• Go direct to usage in this line

Demo

• Check it out live!

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

Or this one of the gif with the Web "Holy Grail Layout"

Other demos

• Basic demo
  • Code
• Holy grail layout
  • Code
• Chat App
  • Code

---

JavaScript/React ⚛

How to install?

yarn add @displaykit/responsive_styles

Get started

• Check this project to see a small example project
• Go direct to usage in this line

Demo

• Check it out live!

---

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

Resources and features

Feature.	Dart/Flutter	JavaScript/React
Responsive	✅	❌
breakpoints	✅	✅
GridItem	✅	🚧
BreakpointsBaseValues	✅	🚧

✅ 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

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 © Mario Souto