@skynexui/responsive_stylesheet: #

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

Contributing #

Want to contribute with 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 about it

Summary #

• Dart/Flutter
• JavaScript/React
• Docs

Dart/Flutter 🐦 #

• Check the examples to see the usage

How to install? #

flutter pub add skynexui_responsive_stylesheet

Demo #

• Check it out

body: Container(
  color: 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

JavaScript/React ⚛ #

• Check the examples to see the usage

How to install? #

yarn add @skynexui/responsive_stylesheet

Demo #

• Check it out

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 breakpoints? #

Today, no. But it's in the have a way to do this but the names xs...xl will remain part of the library to make easier to use the abstractions.

Resources and features #

• ✅ Ready
• 🚧 WIP
• ❌ Not in roadmap by now
• 🛣 Inside roadmap

License #

MIT License © Mario Souto