There are 'responsive design' elements other than 'responsive grids' that frequently are used, for ex:

  • different-size images, since bandwidth is important to mobile (background images can be specified by CSS, but not img src elements)
  • larger links for finger-tapping in mobile
  • misc. other design tweaks at different sizes

I've gone through the docs and the issue files and haven't found anything for this. (I'd love for someone to point out something I missed, though ;-) )
It'd be nice to have the media queries for the Responsive Grids and other Responsive Design elements be specified in one place. The new Sass support for media query variables sounds promising for this (Add breakpoint mixins after release of Sass 3.2 ).
Off the top of my head, there are a couple of ways to structure the addition of responsive design elements:

  • Put in Sass media query variables wherever a changeable element occurs. This could get messy over the life of a project, though.
  • Do something similar to the Omega theme, and load extra stylesheets last for each media query, each containing only design elements that have changed.

Comments

johnalbin’s picture

johnalbin
they/他
Primary language English
Location Taipei, Taiwan
commented
Status: Active » Closed (won't fix)

It'd be nice to have the media queries for the Responsive Grids and other Responsive Design elements be specified in one place.

I disagree. Each style component should specify how it responds (using media queries) directly next to the code that implements that component.

Do something similar to the Omega theme, and load extra stylesheets last for each media query, each containing only design elements that have changed.

On the contrary, we have experience with something like this. We put our RTL styling in a separate file and it gets widly out-of-sync with the standard styling because it is in a separate file. Ditto with IE-specific stylesheets. Having a separate file for each media query is a bad plan.