Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement Responsive Design in devices.css using getCqi Function and inline-size Container Type #22

Open
wants to merge 6 commits into
base: master
Choose a base branch
from

Conversation

scheibome
Copy link

Summary

This pull request proposes enhancements to the devices.css for improving its responsiveness across various devices. It introduces the getCqi function and leverages the CSS container-type: inline-size to replace fixed pixel measurements with a dynamic, device-responsive approach.

Changes

  • Added the getCqi function to the package's CSS utility functions.
  • Updated existing CSS rules in the package, replacing fixed pixel values with calls to the getCqi function.
  • Applied container-type: inline-size to relevant containers within the package for dynamic adaptation to device widths.

Rationale

Fixed pixel values in CSS lead to a non-responsive design that doesn't accommodate the vast array of device screen sizes available today. The adoption of a more responsive design is crucial to ensure usability across all devices.

Responsive Design

The introduction of the getCqi function allows dynamic adjustment of sizes based on the device's width. This ensures that layouts and element sizes are flexible and automatically adapt to different screen sizes.

Scalability

The use of calc() with relative units (1cqi) related to the device's width enables proportional scaling of elements. This maintains a consistent user experience across devices.

Maintenance and Readability

Defining sizes with the getCqi function not only simplifies maintenance but also enhances code readability. It provides a clear understanding of how elements will resize and adjust across different devices.

Accessibility

Using relative sizes for elements ensures appropriate scaling on various devices, especially important for users with accessibility needs.

Testing

  • Conducted extensive device and screen size testing to ensure the responsiveness of the package.
  • Performed cross-browser testing to verify consistent behavior across different web browsers.

Conclusion

Integrating these changes into devices.css will significantly enhance its responsiveness, ensuring a better and more consistent user experience across all device types and screen sizes.

@scheibome
Copy link
Author

This would also resolve Issue #7

@opensourcecheemsburgers
Copy link

Firefox does not support cqi or at least has put it behind a feature flag.

For anyone wondering how to make the devices responsive, you need to place the devices inside of a div with a container type of inline-size.

@scheibome
Copy link
Author

Firefox has supported cgi as a length unit, as used in my pull request, for more than a year.

https://caniuse.com/mdn-css_types_length_container_query_length_units

@opensourcecheemsburgers
Copy link

My bad, it also seems that the feature flag in question is enabled by default.

Is it possible to style devices according to height i.e. in a flex row?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants