Reactive Responsive Design: Part 1

Photo by Daniel Korpai on Unsplash

Reactive Responsive Design is a term I coined to describe a new paradigm for front-end design. It’s rooted in responsive design and builds into it the principles of reactive programming with RxJS. What we get in return for this is a cleaner, more maintainable, more flexible, and more testable app.

At the heart of responsive design is the media query. The media query is a css3 standard that conditionally applies styling based on a specific css query. The most commonly used options are min-width and max-width, which when used together, provides a range of screen widths where styles are applied.

The problem is that media queries are a mess. Here are some reasons why:

1. Where is my code!?
   This is something I’ve often observed. Let’s say you have a web page with a lot of styling, and it has 5 responsive breakpoints. You need to take a look at the styling for the title on the page. You open the css file and find 1000+ lines of css with the title code spread throughout.
2. Teams can end up with different queries.
   Especially when using modern JS frameworks you run the risk of different parts of a page having different breakpoints. This is an issue because your app could end up in a weird state on some screen sizes. What if a phone with an extra wide screen became popular and most of your app adjusted to mobile view on…