Media Queries and Responsive Design

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • WorkOS - The modern API for authentication & user identity.
  • Onboard AI - ChatGPT with full context of any GitHub repo.
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • react-responsive

    CSS media queries in react - for responsive design, and more.

    There are NPM packages like react-responsive that provide custom hooks for easy usage of Media Queries:

  • japan-slider

    A slider showcasing Japan's various attractions

    This is an example of this technique I used in one of my projects:

  • WorkOS

    The modern API for authentication & user identity. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  • Tailwind CSS

    A utility-first CSS framework for rapid UI development.

    Tailwind CSS has multiple pre-defined screen sizes (breakpoints) that are compiled to the relevant Media Query (e.g. md will compile to @media (min-width: 768px) { ... }). You can use these breakpoints to easily apply different styles for different screen sizes:

  • styled-components

    Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

    You can use Media Queries in Styled-Components similar to how you would use them in CSS, other than the fact that you can define custom screen sizes in your theme and access them inside your Media Queries:

  • material-ui-docs

    ⚠️ Please don't submit PRs here as they will be closed. To edit the docs or source code, please use the main repository:

    Material UI has its own set of breakpoints that can be customized in your theme. You can use them inside the sx prop to customize your styles for different screen sizes:

  • Onboard AI

    ChatGPT with full context of any GitHub repo. Onboard AI learns any GitHub repo in minutes and lets you chat with it to locate functionality, understand different parts, and generate new code. Use it for free at app.getonboardai.com.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts