Media Query Snippet for Sublime Text

Declaring CSS Media Query rules has become standard practice during my recent responsive design projects. But declaring those rules has stunted my coding flow because I can never remember the correct syntax for a media query.

Even though I’ve written out the media query declaration hundreds of times, for some reason I haven’t committed the syntax to memory. I’m always looking back at a previous media query rule and pasting it to a new spot in my CSS file to declare a new breakpoint. This has become tedious because I have to stop my current flow and sift through my CSS document to find a previous media query, copy that rule, scroll back to where I was, and then paste the rule. And I’m still not done. I then need to edit the rule accordingly to change the ems or pixel breakpoint, or change the rule from max-width to min-width, or vice versa. First world problems, I know.

Since I primarily use Sublime Text 2 for editing, I decided to create a snippet that would help with whatever brain damage prevents me from memorizing the media query syntax. Now, all I have to do to create a min-width or a max-width media query is simply type ‘mq’ into Sublime and a contextual menu pops up that allows me to select the snippet (or I can press Tab). Once I’ve selected the snippet, the code is pasted into the editor, and I can type ‘min’ or ‘max’ to create the corresponding rule. I can then tab once more to add a value to my media query. Then tab again to place my cursor inside the newly created rule and start adding CSS rules.

Here is the snippet I have been using regularly. It handles min-width or max-width:

Media Query Snippet


<snippet>
  <content><![CDATA[
@media screen and (${1: max or min}-width: ${2: enter value here}) {
    ${3:}
}
 
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>mq</tabTrigger> 
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
	<!-- <scope>source.python</scope> -->
</snippet>

Please give the snippet a try and let me know what you think. I hope someone else finds this snippets useful.

You can find this snippet as a Gist as well:

For more information on how to add a snippet to Sublime text, please see the following link:
https://sublime-text-unofficial-documentation.readthedocs.org/en/latest/extensibility/snippets.html

Prepros: Preprocessing Made Easy

Prepros is a tool I’ve been using in my development workflow for awhile now and I wanted to give the developer ( Subash Pathak), the praise he deserves. It’s one of the best tools in my developer toolkit.

Prepros makes it super simple to setup your project with the preprocessing juice it needs. It can do all the heavy lifting for you to preprocess javascript, css, and even images. It compiles LESS, Sass, Stylus, Jade, Slim, Coffeescript, LiveScript, Haml and Markdown. It also handles JS Concatenation. And it does this on the fly while developing in real time.

Error and success notifications instantly notify you if there is a problem with your latest save when the file is processed. If the is an error, the notification windows tells you the exact line number where the error has occurred. Very handy!

There are also a bunch of features that I haven’t tried yet that look really great. Such as Live Refresh,   Multi Device Refresh, and the built-in Web Server.

All you have to do to get started is drag your project folder onto the Prepros window. The app automagically detects the type of each file in your project. It also lets you toggle the preprocessor settings for each file to allow for maximum customization. You can add as many projects as you like and Prepros will keep track of them for you.

I highly recommend trying it out on your next development project. It is super easy to setup and there are versions for Windows, OSX, and a Chrome Extension.

It is also great for those who aren’t always comfortable using the command line or don’t want to fuss with all the manual setup. Myself included.

Min-width: A Responsive Web Designer’s Best Friend

Mobile first development is a hard concept to grasp if you’ve been doing web development for a number of years and are used to developing websites for a desktop screen.

If you have started to design websites with more than one device size in mind, then chances are you have dabbled with media queries to some extent. Most likely using the max-width media query.

@media screen and (max-width: 840px) {
  p {
    font-size: 2em;
  }
}

This method is good for taking a desktop optimized site design and making it mobile or tablet friendly. However, this will result in rewriting entire style sets to make the desktop ‘version’ look great on mobile.

Min-width is your new best friend

There is a better way. Start your development and design with mobile first in mind. This probably isn’t the first time you heard this mantra (I also recommend reading Mobile First by Luke Wroblewski). Consider the mobile styles as your base style set, then add to those styles using min-width. This will save you time in the long run, even though it may take you awhile to get used to crafting your CSS with mobile styles as your base styles.

Continue reading