Posted By

fasterhorses on 04/01/13


Tagged

web design responsive


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

anevaude


The Double A Method


 / Published in: CSS
 

A toolkit method for responsive development

  1. /*
  2. ==================================================
  3.   The Double A Method
  4. ==================================================
  5. */
  6.  
  7. * { box-sizing: border-box; }
  8.  
  9. body {
  10. border-left-color: red;
  11. border-left-style: solid;
  12. border-left-width: 8px;
  13. }
  14.  
  15. @media only screen and (min-width: 30em) {
  16. body { border-left-color: orange; }
  17. }
  18.  
  19. @media only screen and (min-width: 40em) {
  20. body { border-left-color: green; }
  21. }
  22.  
  23. @media only screen and (min-width: 50em) {
  24. body { border-left-color: blue; }
  25. }
  26.  
  27. @media only screen and (min-width: 60em) {
  28. body { border-left-color: purple; }
  29. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: anevaude on April 4, 2013

This is the most amazing piece of code I have ever, ever seen.

You need to login to post a comment.