Media Query Mixin

[kristyjy]

While writing the style guide I was thinking it would be helpful to use a mixin to write more simple and maintainable media queries. Do others agree?

I think something as simple as this: http://sass-guidelin.es/#breakpoint-manager would be nice but these more complex projects I found interesting as well: http://include-media.com/ + http://breakpoint-sass.com/

[arschmitz]

We talked two or three week ago about keeping all media queries as their own separate files. I think the break points themselves should be variables we will want this incorporated into our build process for things like the grid builder.

So on a conceptual level I agree but we should figure out the best way to handle this library wide, and how this will fit into our use of JSSass vars and the node build we are talking about.

[kristyjy]

Was keeping the media queries in separate files fully agreed upon? The last I heard it was still up in the air. I think it would be good practice to keep the media queries in the same file as each rule. It will be far easier to read and maintain the code this way. I can't help but feel like it could turn into a giant where's Waldo search for code otherwise.

[arschmitz]

The idea we talked about was to keep them in pairs so each component would have its base file and a media query file so there is no searching.

[sfrisk]

If I remember correctly, I think we discussed the pros and cons of both approaches (separate and together), but I don't believe a decision on approach was fully agreed on, and we were going to discuss it later, since that meeting went over by about 20 minutes. @MichaelArestad do you remember ?

[MichaelArestad]

I think the majority of those in the meeting were leaning toward a separate file. I was not one of them.

[arschmitz]

I think the crux of my argument was basically it should be possible to exclude them. There are many use cases where you will not want them at all. For example a mobile only hybrid app generally uses no media queries.

I completely understand ease of maintenance however this is just the nature of writing modular code, which i think we can all agree is a best practice. We should not put our own maintenance concerns above the needs / use cases of the community.

[sfrisk]

Could @kristyjy suggestion of using a media query mixin possibly help to make that sort of thing easier?

[kristyjy]

That's what I was thinking as well. I imagine it would be pretty straight forward to pull out blocks using that mixin for the build process so we could have a separate version with no media queries. I know quite a few build processes do with with regular media queries as well such as the grunt-stripmq project: https://www.npmjs.com/package/grunt-stripmq

[arschmitz]

How would this work to exclude in a custom build? You can't just exclude a mixin as far as i know it will throw an error an everywhere it is used Undefined mixin error

[sfrisk]

you could pass a variable into the mixin, which could be part of the work you've been doing, @arschmitz

[arschmitz]

@sfrisk wouldnt that just change the value of the media query though not exclude it?

@kristyjy that could work but thats an extra build step and extra processing when you could do nothing and let sass handle it just by placing it in a different file.

[sfrisk]

http://stackoverflow.com/questions/5456467/syntax-for-if-else-condition-in-scss-mixin

[kristyjy]

@sfrisk I like that idea. We could set a variable to decide if the build should use media queries. If the variable returns false the mixin could just not print the styles passed in.

[arschmitz]

Yeah that seems like it would address my concern because your still keeping them in a different file and are able to exclude them +1

[MichaelArestad]

@sfrisk Ugh. I'm disgusted that idea never occured to me. That's clever.

We could write something where if $media-queries == true we pass the MQ. If not, return nothing.

[arschmitz]

@MichaelArestad yeah and in the media query variable module you could just set false to exclude it everywhere seems like it would work perfect

I don't think its important to be able to exclude them on a per module basis just as a whole.

[MichaelArestad]

I agree. This way it's trivial to exclude them without needing to keep them in separate files.

[kristyjy]

Great! +1 as well. So I think this means we should leave this issue as is for someone to write a mixin that can handle simple media query syntax and use the $media-queries variable. If people don't care I'm willing to take this issue on so I can easily incorporate it into the style guide.

[arschmitz]

:+1: @kristyjy go for it!

[sfrisk]

yay!

[sfrisk]

Also the advantage to this approach if someone doesn't want to be responsive, and be desktop only, we could also accommodate for that.

[sfrisk]

Closing this due to the discussion in #94