Favourite Media Query Breakpoints

[Joss]

I already use Prepros for compiling sass and less (and minimising and squishing) and have used it with Foundation without issue.

I have rubygems installed on my dev box and can install boubon mixins from there.

So, all of that is set up and happy. It is just a question of finding time to learn it!

What is available for ST3? Other than a syntax highlighter, I haven't looked further.

[OrganizedFellow]

I have rubygems installed on my dev box and can install boubon mixins from there.

So, all of that is set up and happy. It is just a question of finding time to learn it!

What is available for ST3? Other than a syntax highlighter, I haven't looked further.

I have the same issue.

I got all the required gems and ruby related stuff installed. I even used them a few times. I just got to remember to USE them. lol.

[Joss]

Okay, starting my learning curve and currently it has flipped all the way over and banged me in the back of the head.

Its working okay, but currently it is messy.

My main issue is handling media queries. I don't particularly want to nail myself down to set breakpoints, but it is as good way of learning.

I have found some code to give them names using maps, but I am worried that I am going to be generating a lot more css code by doing things like

.my-class {
  color: red;
  @include respond-to(small){
    color: blue;
  }

Than in grouping media queries together.

[Joss]

On the other hand, this is quite cute:

https://github.com/guardian/sass-mq

From those nice people at the Grauniad (for those Britons old enough to remember the joke)

[Marty Walker]

I've been inlining media queries in my LESS files (I haven't gotten around to using SASS yet, and because of AIOM) for a while now. As you say the CSS is a mess but I'm OK with that.

I usually have a variable at the top of my LESS file:

@mobile:  ~"handheld, only screen and (max-width: 767px)";

When I need to use it:

foo {
	margin-bottom: 3rem;
	@media @mobile {
		margin-bottom: 20rem;
	}
}

If I find myself needing more breakpoints I just add a variable with a different max-width.