Website development and design blog, tutorials and inspiration

Minimal Responsive Mobile First CSS Skeleton

Copy and paste mobile first responsive template

By , 20th February 2013 in HTML/CSS

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title></title>
  6. <style type="text/css">
  7. /* Common base styles for all devices */
  8. .allWidths {font-size:1.5em}
  9. body:after { content: 'Size: Mobile below 480px';background:yellow;padding:0.25em}
  10.  
  11. @media only screen and (min-width: 480px) {
  12. /* Styles for wide mobiles (480px) and above */
  13. body:after { content: 'Size: Wide mobile 480px and up'; }
  14. .wideMobileOnly {font-size:1.5em;color:pink}
  15. }
  16.  
  17. @media only screen and (min-width: 768px) {
  18. /* Styles for tablets/netbooks (768px) and up */
  19. body:after { content: 'Size: Tablets 768px and up'; }
  20. .tabletOnly {font-size:1.5em;color:blue}
  21. }
  22.  
  23. @media only screen and (min-width: 1024px) {
  24. /* Styles for large screens (desktops 1024px) and above */
  25. body:after { content: 'Size: Desktop 1024 and up'; }
  26. .desktopOnly {font-size:1.5em;color:green}
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <p class="allWidths">Styled on All Device Sizes</p>
  32. <p class="wideMobileOnly">Styled on Wide Mobiles and Up</p>
  33. <p class="tabletOnly">Styled on Tablets and Up</p>
  34. <p class="desktopOnly">Styled on Desktop Only</p>
  35. <p>Resize browser to see how styles change according to browser width.</p>
  36. </body>
  37. </html>

Further Reading
Comments

There are no comments for this post. Be the first!

Leave a Reply

Your email address will not be published.