Web Design that taps into the haromny and vision of your dreams.

Minimal Responsive Mobile First CSS Skeleton

By on in HTML/CSS

485 words, estimated reading time 3 minutes.

A minimal, no-nonsense, responsive, mobile first CSS3 skeleton which demonstrates media queries for varying screen sizes. No frameworks, no JavaScript just the absolute bare bones.

When developing the responsive mobile first CSS for this website, I had a look around Google for decent CSS3 media query examples, but I really wanted something that isn't part of a framework with typography, grids, javascript, CSS resets and so on built in. All I wanted was a simple, minimal, barebones media query example. Even the barebones and skeleton frameworks are several kb in size and stripped of all their resets still didn't give me the fluid responsive mobile first CSS template example I needed.

With that in mind, I created this minimal responsive template which shows nothing but mobile first media queries and how the style for the smallest width is used for larger widths. Best of all it works in all major browsers!

You can see how the different media queries effect the responsive template by resizing your browser window and see how the layout changes based on the width. The common base styles are applied to each and every browser style, but those within min-width:480px style block are only applied to browser sizes of 480px and up. Style definitions in this block will override those in the common area, the same is true for the other media queries until the desktop size overrides the tablet, mobile and common.

This code works in all major browsers, apart from Internet Explorer 8 and below. To fix that you need to use a section of JavaScript called css3-mediaqueries-js. This script converts the media queries into a format supported by IE8.

Responsive Mobile First CSS Template

<!DOCTYPE html>
  <meta charset="utf-8" />
  <style type="text/css">
    /* Common base styles for all devices */
    .allWidths {font-size:1.5em}
    body:after { content: 'Size: Mobile below 480px';background:yellow;padding:0.25em}
    @media only screen and (min-width: 480px) {
      /* Styles for wide mobiles (480px) and above */
      body:after { content: 'Size: Wide mobile 480px and up'; }
      .wideMobileOnly {font-size:1.5em;color:pink}
    @media only screen and (min-width: 768px) { 
      /* Styles for tablets/netbooks (768px) and up */
      body:after { content: 'Size: Tablets 768px and up'; }
      .tabletOnly {font-size:1.5em;color:blue}
    @media only screen and (min-width: 1024px) { 
      /* Styles for large screens (desktops 1024px) and above */
      body:after { content: 'Size: Desktop 1024 and up'; }
      .desktopOnly {font-size:1.5em;color:green}
  <p class="allWidths">Styled on All Device Sizes</p>
  <p class="wideMobileOnly">Styled on Wide Mobiles and Up</p>
  <p class="tabletOnly">Styled on Tablets and Up</p>
  <p class="desktopOnly">Styled on Desktop Only</p>
  <p>Resize browser to see how styles change according to browser width.</p>

View on Codepen

Last updated on: Tuesday 20th June 2017



Have a question or suggestion? Please leave a comment to start the discussion.


Leave a Reply

Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Your email address will not be published.