For your responsive web designing pleasure, I’ve put together a little CSS3 Media Query Reporter.

UPDATES

Get the latest version on github

Media Query Reporter on Github

  • Version 1.01: includes 320px through 1440px in increments of 160px

Ruby Gem!

Christopher Moeller has created a ruby gem to add the latest version of the Media Query Reporter to your Rails App.

Original code below

Get the latest at Github.

/* ======================================

    Media Query Reporter Styles
      by David Cochran
      aLittleCode.com

========================================= */

body:after {
    content: "less than 320px";
    font-size: 200%;
    line-height: 1;
    font-weight: bold;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 5px 0;
    text-align: center;
    background-color: hsla(1,60%,40%,0.7);
    color: #fff;
    z-index: 9999;
}
@media only screen and (min-width: 320px) {
    body:after {
        content: "320 to 480px";
        background-color: hsla(90,60%,40%,0.7);
    }
}
@media only screen and (min-width: 480px) {
    body:after {
        content: "480 to 768px";
        background-color: hsla(180,60%,40%,0.7);
    }
}
@media only screen and (min-width: 768px) {
    body:after {
        content: "768 to 1024px";
        background-color: hsla(270,60%,40%,0.7);
    }
}
@media only screen and (min-width: 1024px) {
    body:after {
        content: "1024 to 1360px";
        background-color: hsla(360,60%,40%,0.7);
    }
}
@media only screen and (min-width: 1360px) {
    body:after {
        content: "1360 and up";
        background-color: hsla(90,60%,40%,0.7);
    }
}

Live Demo

See a live demo of a previous version of this little CSS3 Media Query Reporter in action over at Webdesigntuts+

Online Tutorial

For a quick tutorial on the rationale and process of building this — as well as the first steps toward creating a responsive grid system — see my tutorial at Webdesigntuts+.

 

6 thoughts on “A Little CSS3 Media Query Reporter

  1. Hi David!

    Thanks for this reporter! It is a really cool tool. Though I’m more of a developer than I designer, there are times that I have to do basic designs and it helps me with creating responsive sites.

    I decided to make ruby gem of your reporter and plan to post the code on Github when it’s done. Before doing that, however, I want your permission to do so. The purpose of the gem is to make it easy to install your CSS3 Media Query Reporter in a Rails application (and maybe expand it to more frameworks later on) without having to copy files and manually modify the layout files.

    Also, I noticed when the body element has a margin greater than 0 (body { margin: 0; } is not set), the banner across the bottom of the browser applies the same margin. Is there a way that you can think of that I can apply the negative margin if I need to in just CSS? The only thing I can think of is to use JavaScript, but I’m trying to avoid that.

    Thanks!

    Christopher

  2. Chris,
    Thanks for your note and your query about this. Sounds good … but let me put my original CSS in my own github repository first, and then we can look to it as the main repository for the CSS.

    Hadn’t thought about body margin, but it’s something others will undoubtedly run into. Strikes me as an interesting challenge. I’ll chew on it and play with it. BUT I’m very interested in others’ contributions!

    I’ll update when I get this in Github.

  3. David,

    Here’s a link to my repo on GitHub: https://github.com/cmoel/mq_reporter.

    When adding the gem to your rails project and installing it, you can run a terminal command which downloads and installs the latest version of your Media Query Reporter.

    I’d love to know your thoughts.

    Thanks again for a great tool and your willingness to work with me on this project!

    Christopher

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s