Skip to content

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

License

Notifications You must be signed in to change notification settings

displaykit/responsive_styles

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

44 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

@displaykit/responsive_styles:

You don't need to be worried just because you have to support multiple screens πŸ“Ί πŸ–₯ πŸ’» πŸ“±.

licence mit Downloads Current Version Flutter Package NPM Package

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

Summary


Dart/Flutter 🐦

How to install?

flutter pub add responsive_styles

Get started

Demo

CleanShot 2022-07-27 at 16 27 30

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


JavaScript/React βš›

How to install?

yarn add @displaykit/responsive_styles

Get started

Demo


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