Combine media queries

[zebapy]

For those of us who prefer to write our media queries in the same file as the main selector, I think it'd be helpful to add something like gulp-combine-mq to the build tools. I'd be happy to make a PR.

[rafibomb]

Are you referring to your custom CSS or the framework itself?

For the framework it would be amazing to have related CSS all in the same file. Love the idea and a PR would really help tons of people!

This could be a great one for the next point release v2.3

[zebapy]

I only mean to combine media queries when embedding them into the final email

Example of separate media queries when using Sass:

_partial.scss

.container {
  max-width: 600px;

  // this is usually done with a mixin
  @media (max-width: 620px) {
    max-width: 100%;
  }
}

.someColumn {
  width: 50%;
  @media (max-width: 620px) {
    width: 100%;
  }
}

app.css

.container {
  max-width: 600px;
}
@media (max-width: 620px) {
  .container {
    max-width: 100%;
  }
}

.someColumn {
  width: 50%;
}
@media (max-width: 620px) {
  .someColumn {
    width: 100%;
  }
}

embedded result in the email after running npm run build

<style>@media (max-width: 620px) { .container { max-width: 100%; } } @media (max-width: 620px) { .someColumn { width: 100%; } } </style>

Using something like the above mentioned gulp-combine-mq should solve this if it was added in the build task.

have related CSS all in the same file

@rafibomb I'm not sure I understand what you mean by that. I can make a PR for this but it does nothing more than merge media queries.

[catherineomega]

I think a PR that only did that would be handy. It's a useful feature and it likely won't get added without one, right? :)

[DanielRuf]

gulp-combine-mq was not updated for 5 years. So this is currently not an option.

[zebapy]

There are postcss plugins and other packages that do it still I believe

On Sun, Dec 22, 2019, 6:07 AM Daniel Ruf notifications@github.com wrote:

gulp-combine-mq was not updated for 5 years. So this is currently not an option.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/foundation/foundation-emails/issues/519?email_source=notifications&email_token=AAQZCJLOD7TQCTHMDVMWYCTQZ5DAXA5CNFSM4CI5QWWKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHPNP6Y#issuecomment-568252411, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAQZCJJ4TVXIYWVHH363SQ3QZ5DAXANCNFSM4CI5QWWA .