responsive_styles

Description:

responsive styles

@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
copied to clipboard
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,
}),
)
copied to clipboard

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
copied to clipboard
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