advanced code snippet search

We Recommend

HTML: The Definitive Guide HTML: The Definitive Guide
They teach you that learning HTML is like learning any other language and that reading a book of rules can only take you so far. Readers begin writing what may be their first Web page just two pages into the book's second chapter. From there on, they provide a wide range of HTML coding to allow readers to learn from good examples. The book includes a handy "cheat sheet" of HTML codes for quick reference.

Posted By

LeeRJohnson on 05/24/08


Tagged

layout conversion grid blueprint BlueprintCSS


Versions (?)


Who likes this?

5 people have marked this snippet as a favorite

basicmagic
SpinZ
visuallyspun
alvaroisorna
hannizkaos


BlueprintCSS Default Pixel to Em Conversion

Published in: HTML 

Plain TextExpand 
  1. .container {
  2.   width:79.166em;
  3.   margin: 0 auto;
  4. }
  5.  
  6.  
  7. /* Columns
  8. -------------------------------------------------------------- */
  9.  
  10. /* Sets up basic grid floating and margin. */
  11. .span-1, .span-2, .span-3, .span-4, .span-5, 
  12. .span-6, .span-7, .span-8, .span-9, .span-10, 
  13. .span-11, .span-12, .span-13, .span-14, .span-15, 
  14. .span-16, .span-17, .span-18, .span-19, .span-20, 
  15. .span-21, .span-22, .span-23, .span-24 {
  16.   float:        left;
  17.   /* Change: approximate EM width of orginal 10px margin (LRJ)*/
  18.   margin-right: .833em;
  19. }
  20.  
  21. /* Use these classes to set the width of a column. */
  22. /* Added by Lee R Johnson 2008-03-08.         
  23.    EM widths aproximate original pixel widths based
  24.    based on default font-size. px-width is a holder;
  25. */ 
  26. .span-1     {   width: 2.5em;       }
  27. .span-2     {   width: 5.833em;     }
  28. .span-3     {   width: 9.166em;     }
  29. .span-4     {   width: 12.5em;      }
  30. .span-5     {   width: 15.833em;    }
  31. .span-6     {   width: 19.166em;    }    
  32. .span-7     {   width: 22.5em;      }
  33. .span-8     {   width: 25.833em;    }
  34. .span-9     {   width: 29.166em;    }
  35. .span-10    {   width: 32.5em;      }
  36. .span-11    {   width: 35.833em;    }
  37. .span-12    {   width: 39.166em;    }
  38. .span-13    {   width: 42.5em;      }
  39. .span-14    {   width: 45.833em;    }
  40. .span-15    {   width: 49.166em;    }
  41. .span-16    {   width: 52.5em;      }
  42. .span-17    {   width: 55.833em;    }
  43. .span-18    {   width: 59.166em;    }
  44. .span-19    {   width: 62.5em;      }
  45. .span-20    {   width: 65.833em;    }
  46. .span-21    {   width: 69.166em;    }
  47. .span-22    {   width: 72.5em;      }
  48. .span-23    {   width: 75.833em;    }
  49. .span-24    {   width: 79.166em;    }
  50.  
  51. /* The last column in a row needs this class. */
  52. .last, span-24{ margin-right: 0; }
  53.  
  54.  
  55. /* Add these to a column to append empty cols. */
  56. .append-1   {   padding-right: 3.333em;            }	
  57. .append-2   {   padding-right: 6.666em;            }	
  58. .append-3   {   padding-right: 10em;               }	
  59. .append-4   {   padding-right: 13.333em;           }	
  60. .append-5   {   padding-right: 16.666em;           }	
  61. .append-6   {   padding-right: 20em;               }	
  62. .append-7   {   padding-right: 23.333em;           }	
  63. .append-8   {   padding-right: 26.666em;           }	
  64. .append-9   {   padding-right: 30em;               }	
  65. .append-10  {   padding-right: 33.333em;           }	
  66. .append-11  {   padding-right: 36.666em;           }	
  67. .append-12  {   padding-right: 40em;               }	
  68. .append-13  {   padding-right: 43.333em;           }	
  69. .append-14  {   padding-right: 46.666em;           }	
  70. .append-15  {   padding-right: 50em;               }	
  71. .append-16  {   padding-right: 53.333em;           }	
  72. .append-17  {   padding-right: 56.666em;           }	
  73. .append-18  {   padding-right: 60em;               }	
  74. .append-19  {   padding-right: 63.333em;           }	
  75. .append-20  {   padding-right: 66.666em;           }	
  76. .append-21  {   padding-right: 70em;               }	
  77. .append-22  {   padding-right: 73.333em;           }	
  78. .append-23  {   padding-right: 76.666em;           }	
  79. .append-24  {   padding-right: 80em;               }	
  80.  
  81. /* Add these to a column to prepend empty cols. */
  82. .prepend-1   {   padding-left: 3.333em;            }	
  83. .prepend-2   {   padding-left: 6.666em;            }	
  84. .prepend-3   {   padding-left: 10em;               }	
  85. .prepend-4   {   padding-left: 13.333em;           }	
  86. .prepend-5   {   padding-left: 16.666em;           }	
  87. .prepend-6   {   padding-left: 20em;               }	
  88. .prepend-7   {   padding-left: 23.333em;           }	
  89. .prepend-8   {   padding-left: 26.666em;           }	
  90. .prepend-9   {   padding-left: 30em;               }	
  91. .prepend-10  {   padding-left: 33.333em;           }	
  92. .prepend-11  {   padding-left: 36.666em;           }	
  93. .prepend-12  {   padding-left: 40em;               }	
  94. .prepend-13  {   padding-left: 43.333em;           }	
  95. .prepend-14  {   padding-left: 46.666em;           }	
  96. .prepend-15  {   padding-left: 50em;               }	
  97. .prepend-16  {   padding-left: 53.333em;           }	
  98. .prepend-17  {   padding-left: 56.666em;           }	
  99. .prepend-18  {   padding-left: 60em;               }	
  100. .prepend-19  {   padding-left: 63.333em;           }	
  101. .prepend-20  {   padding-left: 66.666em;           }	
  102. .prepend-21  {   padding-left: 70em;               }	
  103. .prepend-22  {   padding-left: 73.333em;           }	
  104. .prepend-23  {   padding-left: 76.666em;           }	
  105. .prepend-24  {   padding-left: 80em;               }
  106.  
  107. /* Use these classes on an element to push it into the 
  108.    next column, or to pull it into the previous column.  */
  109.  
  110. .pull-1 {   margin-left: -3.333em;  }
  111. .pull-2 {   margin-left: -6.666em;  }
  112. .pull-3 {   margin-left: -10em;  }
  113. .pull-4 {   margin-left: -13.333em; }
  114. .pull-5 {   margin-left: -16.666em; }
  115.  
  116. .pull-1, .pull-2, .pull-3, 
  117. .pull-4, .pull-5, .pull-5 {
  118.     float:left;
  119. 	position:relative;
  120. }
  121.  
  122. .push-1 {   margin: 0 -3.333em 1.5em 3.333em;   }
  123. .push-2 {   margin: 0 -6.666em 1.5em 6.666em;   }
  124. .push-3 {   margin: 0 -10em 1.5em 10em;         }
  125. .push-4 {   margin: 0 -13.333em 1.5em 13.333em; }
  126. .push-5 {   margin: 0 -16.666em 1.5em 16.666em; }
  127.  
  128. .push-0, .push-1, .push-2, 
  129. .push-3, .push-4, .push-5 { 
  130.   float: right;
  131. 	position:relative;
  132. }

Report this snippet 

You need to login to post a comment.